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.

Ctfrancia
  • 1,248
  • 1
  • 15
  • 39

1 Answers1

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • 3
    I would recommend setting width and height based on em so it scales with the font size. – James Coyle Sep 25 '19 at 11:47
  • 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! – Ctfrancia Sep 25 '19 at 11:50
  • @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 – Mihai T Sep 25 '19 at 11:56
  • @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 – Mihai T Sep 25 '19 at 12:09
  • note that W3C is not W3Schools, you may want to edit that part to avoid confusion about refering to a non official specification – Temani Afif Sep 25 '19 at 12:09
  • @TemaniAfif sorry about that. – Mihai T Sep 25 '19 at 12:10