HTML Ordered List Customization. Styling Line Numbers

7.09.2015            CSS, How to

Home » CSS » HTML Ordered List Customization. Styling Line Numbers

If you’ve ever tried to customize the numbers of the HTML

    element items, you may have noticed some issues. There’s no way you to use CSS selectors to get the goal. That’s pretty depressing since the whole idea behind the UI design is that you have a possibility to change the appearance of any website component the way you want.

Here’s the typical ordered list example:

<ol>
    <li>Learn HTML</li>
    <li>Create my own web site</li>
    <li>PROFIT</li>
</ol>

The result is predictable:
html list

Let’s now take a look at the possible solutions.

Old and Clumsy Approach

Here’s the traditional way. You can use the list-style: none property to hide the line numbers created by the browser.

The next step is to add the element before the list items. This element will hold the number. All you have to do is to define the proper CSS style for it:

li{
list-style: none;
}
.num{
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}

And here’s the HTML code:

<ol>
    <li><span class="num">1</span> Learn HTML</li>
    <li><span class="num">2</span> Create my own web site</li>
    <li><span class="num">3</span> PROFIT</li>
</ol>

The result is shown below:
customized list

You can play with the code on this codepen page.

We’ve made it! But such an approach is not so agile, as you can see. Moreover, we can say that this is a redundant way. You should hide the initial number and then add the number you want by your hands. Not so convenient if you ask me.

Let’s make the same task using the ::beforeselector along with the following CSS properties:content, counter-increment, and counter-reset.

Neat and Elegant Way

Let’s start with the code.

Here’s your CSS:

ol{
counter-reset: myCounter;
}
li{
list-style: none;
}
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}

And here’s the HTML code:

<ol>
    <li>Learn HTML</li>
    <li>Create my own web site</li>
    <li>PROFIT</li>
</ol>

Here’s the list that we got:
customized list

Visit this codepen page to check the demo and the code.

We get the same result. But this time our HTML code is neat and contains only the markup part. The appearance of the list is described by CSS, as it should be.

Let’s take a look at how we’ve made it:

  • li::before creates a pseudo element within the list. This element takes the place of the first child
  • counter-reset:myCounter resets the CSS counter myCounter within the
      elements
  • counter-increment: myCounter increments the CSS counter myCounter for every::before pseudo-element
  • content:counter(myCounter) shows the current value of the myCounter counter for every ::before element

That’s it!

You can check this specification page to get more info about the CSS counters.

Nested List and Unlimited Capabilities of Style Customization

Here’s another example. Something more interesting and complicated this time:

nested list

You can create a list like this one combining the techniques we talked about earlier. Here’s the codepen page for this example. Enjoy!

Browser Compatibility

Here’s the compatibility table for CSS counters, ::before and ::after pseudo elements:
browser compatibility

As you can see, there’s nothing to worry about.

The original text was taken from html5.by blog created by Dmitry Dudin.

© 2018 EnjoyCSS News