在文本周围制作圆形边框

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

在 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 2

这将导致一个完美的圆圈：

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

Answer 3

一种解决方案是使用em 使跨度具有相等的width 和height，这样它自然会适应字体大小。

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

Answer 4

您可以使用: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;
}