Customizing HTML lists

<li>

The bullets and numbers in HTML lists can easily be customized. Using the CSS content property we can give the bullets a different color or display the numbers in a bold font. The content property is used to generate content before or after an HTML element via the :before and :after pseudo-elements.

HTML

CSS

Bullets – different color

By default, HTML list bullets inherit the color that is set for the <li> element:

  • Bread
  • Liverwurst
  • Mustard

Using the :before pseudo element we can set and/or change some of its properties:

Bullets – different style

We can also use a different bullet type with unicode characters:

(You can find any special character you wish to use with the HTML Entity Lookup tool.)

Bold list numbers

If you want to highlight the numbers of an ordered list, you need to first eliminate the default counter and apply a new counter that we can then style:

Demo:

See the Pen Custom HTML lists by Uwe Kristen (@ukristen) on CodePen.

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.

Leave a Reply

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

By submitting this form, you accept the Mollom privacy policy.