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.

Is this work for you ? http://jsbin.com/faxubibazitu/1/edit – Kheema Pandey Aug 14 '14 at 06:21 — Kheema Pandey, Aug 14 '14 at 06:21

Kheema Pandey · Accepted Answer · 2014-08-14T06:29:49.270

3

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

edited Aug 14 '14 at 06:29

answered Aug 14 '14 at 06:23

Kheema Pandey

9,977
4
25
26

I basically used a slightly altered version of this. – dtracers Aug 14 '14 at 06:25

score 0 · Answer 2 · answered Aug 14 '14 at 06:10

0

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

answered Aug 14 '14 at 06:10

NoobEditor

15,563
19
81
112

that just made it wider. I am actually looking for it to be less tall and closer to the plus sign – dtracers Aug 14 '14 at 06:12
then reduce your padding more – Benjamin Aug 14 '14 at 06:13

score 0 · Answer 3 · answered Aug 14 '14 at 06:14

0

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

answered Aug 14 '14 at 06:14

Nikhil Khullar

703
6
21

Dem Pilafian · Answer 4 · 2018-11-10T21:31:25.393

0

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.

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

edited Nov 10 '18 at 21:31

answered Aug 14 '14 at 06:17

Dem Pilafian

5,625
6
39
67

one suggestion you should use border-radius value in `%` not in `px`. – Kheema Pandey Aug 14 '14 at 06:25

Make a circular border around text

4 Answers4