Clever Geek Handbook

Make a circular border around the text

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>

By looking at this, you can tell that it is not a circle, but rather an elite. I understand that it is the height of the text that is causing this problem, but there is a way to make it closer.

The background is dynamic, so I cannot use the image. And I would rather have a floating element that relies on absolute positioning.

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

EDIT For those who say this is the same question, this is curious. The difference between what I am asking and what this person is asking is that in their case the circle is larger than the borders of the text.

What I am asking is a circle that is smaller than the borders of the text. So none of the suggested solutions would apply to my question.

+3


source to share


4 answers


You can achieve this using a pseudo element :after

. check 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;
}
+2


source


Adjust the value padding

in css and everything will be fine:

demonstration



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


source


This will lead to a perfect circle:

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


source


http://jsfiddle.net/cvtztcy1/12/

One solution is to make the span equal to width

and height

using em

, so it naturally adjusts to the font size.

span {
   display: inline-block;
   width: 1.0em;
   height: 1.0em;
   line-height: 0.9em;
   text-align: center;
   border: 1px solid silver;
   border-radius: 50%;
   cursor: pointer;
   }

Then center the plus sign with line-height

and text-align

.

0


source






More articles:


All Articles