Circle around :before element

Question

Hello I'm trying to figure out the same question that what was asked in this thread How to use CSS to surround a number with a circle?

However - everytime I do it, the shape becomes oval, regardless if I add width/height or not...

I created a jsfiddle here http://jsfiddle.net/dDuFv/

<ul class="numberCircle">
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
</ul>

CSS

.numberCircle { list-style-type:none; font-size:18px; }
.numberCircle li { margin:20px;}
.numberCircle li:before {
    border-radius:100%;
    counter-increment: section;
    content:counter(section);
    background: #f1562c;
    color:#fff;
    padding:2px;
    border:none;
    text-align: center;
}

but it's just not working!

Thanks for any help!

score 5 · Accepted Answer · answered Dec 24 '13 at 07:19

5

Give display:inline-block; to the pseudo class. It should work.

Write:

.numberCircle li:before {
    width:20px;
    display:inline-block;
}

Updated fiddle here.

answered Dec 24 '13 at 07:19

codingrose

15,563
11
39
58

Awesome answer, but why is this needed to make it function properly? Just curious – camdixon Dec 24 '13 at 07:24
1

Thanks, because by default, pseudo element is inline, properties suct as height,width,margin etc etc. are not applicable on `inline` elements. – codingrose Dec 24 '13 at 07:26
Hmm, so now its hard to get the text centered in the circle, any thoughts? thanks for the previous answer! – Matt Dec 24 '13 at 07:29
@Matt welcome :) isn't the text centered? you can write `text-align:center` – codingrose Dec 24 '13 at 07:31
Nevermind it works, for some reason copying your jsfiddle worked even though I had the same code..I believe.. – Matt Dec 24 '13 at 07:33

Circle around :before element

1 Answers1