Tag Archives: lists

Custom List Number Styling

How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.

Let’s say all you wanna do is style the dang numbers:

See the Pen Custom List Style 2 by Chris Coyier (@chriscoyier) on CodePen.

Here’s an example from the CodePen Challenges pages:

See …

The post Custom List Number Styling appeared first on CSS-Tricks.

Ordered Lists with Unicode Symbols

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <ol> tag is there to help. The default appearance of the <ol> tag presents numbers next to each item in the list. You can use the list-style-type property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like …

Ordered Lists with Unicode Symbols is a post from CSS-Tricks