html - 在文本周围制作圆形边框

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>

一看就知道这不是圆而是椭圆。我已经意识到是文本高度导致了这个问题，但有没有办法让它看起来更近。

背景是动态的，所以我不能使用图像。而且我宁愿没有依赖于绝对定位的 float 元素。

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

编辑对于那些说这是同一个问题的人来说，有点。我问的和那个人问的不同之处在于，在他们的情况下，圆圈大于文本的边界。

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

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;
}