在文本周围做一个圆形边框(Make a circular border around text)

在文本周围做一个圆形边框(Make a circular border around text)

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

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>

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

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

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

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

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

Right now I would like to have a plus sign with a circle around it.

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>

After looking at it you can tell that this is not a circle but instead an elipse. I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.

The background is dynamic so I can not use an image. And I would rather not have a floating element that depended on absolute positioning.

I would also like the circle in height to be equal to its current width. I know I can just make it wider but I don't want a giant circle I want a tight small circle

EDIT For those that are saying this is the same question it is kinda. The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.

What I am asking is for a circle that is smaller than the bounds of the text. As such none of the solutions given there will apply to my question.

最满意答案

您可以使用:after方法实现此目的: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; }

You can achieve this using :after pseudo element. check the 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; }