Make a circular border around text

Question

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.

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