CODEWITHSUNDEEP
csslist
s.dragos
s.dragos

Reputation: 682

Modify list item marker (bullet) property

i have this simple CSS code and I am wondering if there is a way to set the text property of a bullet (in this case, numerical item markers: 1,2,3,etc) to a specific dimension and colour without changing the dimension of all the elements inside li

ol {
   background: #3399ff;
   padding: 20px;
   }
ol li {
     background: #cce5ff;
     color: green;
     font-size: 40px;
     }

Upvotes: 1

Views: 450

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122077

You could do this with :before pseudo-element and css counter.

ol {
  background: #3399ff;
  padding: 20px;
  counter-reset: ol-counter;
  list-style-type: none;
}
ol li {
  background: #cce5ff;
  color: green;
}
li::before {
  counter-increment: ol-counter;
  content: counter(ol-counter)". ";
  font-size: 40px;
  color: red;
}
<ol>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
</ol>

Upvotes: 1

Related Questions