CODEWITHSUNDEEP
htmlcsscss-counter
Gaurang Tandon
Gaurang Tandon

Reputation: 6753

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?

Upvotes: 4

Views: 60

Answers (1)

Harry
Harry

Reputation: 89750

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>

Upvotes: 4

Related Questions