Different color bullets or numbers in the list

colored li ol bullets numbers css

By default, li list items will show same color bullets (when using un-ordered list ul) and same color numbers (when using ordered list ol). You can easily color to these by targeting marker pseudo element.

Preview: ul / ol lists

  • This is first item
  • This is second item
  • This is third item
  1. This is first item
  2. This is second item
  3. This is third item

Step 1

Add li or ol list items in your blocks layout. Then add unique class vc-text-14 to it.

Step 2

Then add the following CSS code. This also accepts font size and font weight values, if you want to customize it further.

.vc-text-14 li::marker {
     color: #4637e7;
💬 Subscribe for Free, for more CSS magic.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login

Leave a Comment

Your email address will not be published. Required fields are marked *