Gaurang Tandon Gaurang Tandon - 6 months ago 29
CSS Question

Custom, regular, ordered bullet list style

I want a list style like this (jsfiddle):

enter image description here

As you can see, the list style is:


  1. not one of the styles provided by CSS, i.e., a custom made style

  2. is regular, i.e., I don't have to manually put values 1, 2, 3, etc. for the
    <li>
    s. So, if I have four
    <li>
    s, it will automatically put four green circles with 1,2,3,4 as the values.



Question:


How do I achieve this task?

Answer

You can do this automatically using CSS counters. CSS counters are incremented when a matching selector is found in the DOM (we can specify by how much to increment also but that's out of scope for this answer). Then the counter's value can be set to the content property of a pseudo-element.

ul {
  counter-reset: li-counter;
  list-style-type: none;
}
li {
  counter-increment: li-counter;
  margin: 10px;
}
li:before {
  display: inline-block;
  content: counter(li-counter);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #20ED89;
  color: white;
  text-align: center;
  line-height: 30px;
  margin: 10px;
}
<ul>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
</ul>

Comments