在文本周围创建一个圆形边框

Question

现在我想要一个带圆圈的加号。

http://jsfiddle.net/dtracers/cvtztcy1/1/

<h1>TEXY TXT <span>+</span></h1>

<style>
span {
    border-radius: 50%;
    border-style:solid;
    border-width: 1px 3px 1px 1px;
    padding:0px;
    padding-bottom:0.125em;
    cursor:pointer;
    margin:0px;
}

/* Just to see if that would modify anything */
h1 {
    padding:0px;
    margin:0px;
}
</style>

看了之后你可以看出这不是一个圆圈而是一个圆形。 我已经意识到导致这个问题的是文本高度，但有一种方法可以让它看起来更接近。

背景是动态的，所以我无法使用图像。 而且我宁愿没有一个依赖于绝对定位的浮动元素。

我还希望高度上的圆等于其当前宽度。 我知道我可以让它更宽，但我不想要一个巨大的圆圈，我想要一个紧凑的小圆圈

修改 对于那些说这是同一个问题的人来说是有点儿的。 我所询问的内容与该人所询问的内容之间的区别在于，在他们的情况下，圆圈大于文本的边界。

我要问的是一个小于文本边界的圆圈。 因此，那里给出的解决方案都不适用于我的问题。

Answer 1

您可以使用:after伪元素实现此目的。检查 DEMO 。

span {
  position:relative;
  padding:0; margin:0;
  cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}

Answer 2

在css中调整padding值，一切都很好：

demo

span {
    border-radius: 50%;
    border-style:solid;
    border-width: 1px 3px 1px 1px;
    padding:0 2%; /* updated */
    /* padding-bottom:0.125em;  removed */
    cursor:pointer;
    margin:0px;
}

Answer 3

这将带来一个完美的圆圈：

span {
    border-radius: 150px;
    border-style:solid;
    border-width: 1px;
    padding:1% 2%;
    cursor:pointer;
    margin:0px;
    width:200px;
    line-height:300px;
}

Answer 4

一种解决方案是使用width使跨度相等height和em，因此它会自然地调整为字体大小。

h1 span {
   display: inline-block;
   width: 0.9em;
   height: 0.9em;
   line-height: 0.8em;
   text-align: center;
   color: teal;
   background-color: palegoldenrod;
   border: 0.18em solid;
   border-radius: 1000px;
   padding-left: 1px;
   cursor: pointer;
   }

然后使用line-height和text-align将加号居中。

摆弄CSS：
http://jsfiddle.net/zx2c4drL