0

Alright, this is really a simple question that I can't solve. I have an html document that looks like this:

<ol> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> </ol>

and the accompanying css looks like this:

ol { list-style: none; counter-reset: li-counter; } ol li { counter-increment: li-counter; } ol li::before { content: counter(li-counter); color: #59cbbe; font-weight: bold; width: 20px; height: 20px; border: 2px solid black; border-radius: 50px; padding: 4px; margin: 10px; }

and here is the codepen

I have tried following and modifying this example, but wasn't able to get it. So I tried this one as well. The main issue that I am having, when you look at the code pen is that the circles are not circles, they are always oblong and oval weather I use 30px or 50% is there something that I am missing. Sorry if this is a really simple answer, but, I am not that great at css.

Improve this question
0

1 Answer 1

Reset to default
7

Well, you were on the right track. You just need to add display: inline-block to the pseudo element so the width:20px; height:20px will have effect. And so the pseudo-element will be a square + rounded border = circle.

inline-block :

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

As you can read up here default display of pseudo-elements the :before pseudo-element has display:inline ( just like a span ) which does not accept width and height

from w3schools :

Displays an element as an inline element (like <span>). Any height and width properties will have no effect

ol { list-style: none; counter-reset: li-counter; } ol li { counter-increment: li-counter; } ol li::before { content: counter(li-counter); color: #59cbbe; font-weight: bold; width: 20px; height: 20px; border: 2px solid black; border-radius: 50px; display: inline-block; text-align: center; padding: 4px; margin: 10px; }
<ol> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> </ol>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I would recommend setting width and height based on em so it scales with the font size.
awesome, thanks. Yea I thought I was around there but then whenever I tried to mess with the display, the elements got thrown all out of whack!
@JamesCoyle maybe it would be better with rem not em. So it will scale with the fontsize of the parent ( li ) but i think that is not needed in this case
@Ctfrancia Glad i could help ! Maybe you tried using display:block which would have a totally different effect. Don't forget to accept my answer, thanks ! :D
note that W3C is not W3Schools, you may want to edit that part to avoid confusion about refering to a non official specification
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.