CODEWITHSUNDEEP
htmlcss
dtracers
dtracers

Reputation: 1648

Make a circular border around 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>

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.

Upvotes: 3

Views: 3835

Answers (4)

Dem Pilafian
Dem Pilafian

Reputation: 5976

One solution is to make the span have equal width and height using em so it naturally adjusts to the font size.

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

Then center the plus sign with line-height and text-align.

circled-plus-sign

Fiddle with the CSS:
http://jsfiddle.net/zx2c4drL

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

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

Upvotes: 3

Nikhil Khullar
Nikhil Khullar

Reputation: 733

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

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15891

Adjust your padding value in css and all is good :

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

Upvotes: 0

Related Questions