Can you style ordered list numbers?

The magic beyond ::marker

The ::marker pseudo-element is your best friend for quick enhancement. But let's dive more into the matrix with a custom approach using CSS counters and ::before pseudo-element.

You'll initialize an invisible counter with counter-reset on the ol and every new list item, aka li, will tick this counter with counter-increment. Then ::before pseudo-element will be your magic wand to render and style these 'counter numbers':

ol {
    list-style: none;
    counter-reset: item;
}
li {
    counter-increment: item;
}
li::before {
    content: counter(item) ". "; /* Numbers before gossip */
    background-color: #e0e0e0; /* Gray sweater */
    border-radius: 50%; /* Circled, not squared */
    color: #333; /* Dark secret */
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    text-align: center;
    line-height: 1.5em;
    margin-right: 0.5em; /* Speak after a pause */
}


Tailor your lists with classes

Don't want to impose a one-style-fits-all approach on your lists? That's where CSS classes come to your rescue! Assign a specific class to your ol and prepend this class to your CSS rules. Now you own the power to create multiple list styles without causing a domino effect on your whole page:

.custom-counter ol {
    /* Similar reset and styles as above */
}
.custom-counter li::before {
    /* Styles to create a unique look, not clone wars */
}


Always remember to test your custom styles on various list lengths and contents and make sure the look is consistently fabulous across all list items.

Specific tweaks for opulent looks

Best friends with modern browsers

In the realm of up-to-date browsers, the ::marker CSS pseudo-element can be exploited to the max. By applying styles to it directly, you can garnish your list numbers with a sophistication that turns heads:

ol li::marker {
    font-size: larger;
    font-weight: bold;
    color: #ff4500; /* Keeping up with the latest fall fashion */
}


Feel free to let your imaginations run wild while playing with ol li::marker.

Compatibility, a universal virtue

Simply jumping onto the latest trends might make your lists appear broken in older browsers. To play safe across all platforms, the ::before pseudo-elements remain your trusty steed:

li::before {
    content: counter(item) ". ";
    /* More styles for universal love */
}


It's a great idea to stay updated with MDN documentation to catch the latest browser compatibility news.

Boost your styles with extras

Need some creative inspirations? Hop onto platforms like CodePen where innovative minds have styled list numbers in ways you never imagined.

Go the extra mile

You're no longer a rookie and CSS styles like padding, font-style, and more can be employed within li::before to elevate your list numbers on the ramp.

Advanced numbering with CSS counters

Did you know, CSS counters are more fluent than you think? They can smartly handle nested lists, numbering them in the format 1.1, 1.2 and so on:

 ol {
    counter-reset: section;
}
li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
    /* Some more styles and you are a pro */
}


Troubleshooting your styles

Encountered a sudden roadblock? Fret not, just revisit your CSS specificity rules and check if any other over-enthusiastic CSS rule is interfering with your desired styles.

Accessible for all

Remember, your lists should be not only visually appealing but also equally accessible to all users, including the ones relying on screen readers.