CSS supports the use of a counter which can be used as the content in the before and after pseudo elements.
The counter can be used in both ordered and unordered lists. And with Divs. and a number of other HTML elements.
Obvious purpose is a table of contents implemented with a list and text for the word chapter and the numeric number.
There’s a counter increment too
The numeric value associated with the list item can be positioned using the before and after pseudo elements in positions which wouldn’t otherwise be achieved.
.list-background-alternates p::before{content: "";position: absolute;left:-3.5em;top: 50%;margin-top: -1.5em;background:#93C775;height: 3em;width: 3em;line-height: 3em;border: .3em solid #D7AAA5;display:flex;justify-content: center;align-items: center;box-shadow:rgb(187, 192, 212) 2px 2px 3px 1px;border:1px solid #000;border-radius:50%;color:#000;}
.list-alternate li{position:relative;}
.list-alternate{counter-reset: li-counter;list-style: none;*list-style: decimal;}
.list-alternate li{counter-increment:li-counter;}
.list-background-alternates p::before{content: counter(li-counter);}
In the example above I’ve added an initial couple of entries to provide some styling of the before element with the counter inside. The following 3 lines relate to resetting of the counter, it’s incrementation and it’s rendering within the before element. The counter is reset and declared to have the name of li-counter. There can therefore be more than one counter running on a viewed page.
Unfortunately because the value created is a string it can’t be used in calculations.
If you wish to start your numbering with an offset this can be done using the reset value. For example to reset the counter li-counter to a value of 4:
.list-alternate{counter-reset: li-counter 4;}
text can be added around the counter number, for example to add text indicating a chapter number:
.list-background-alternates p::before{content: 'Chapter: ' counter(li-counter);}
If you wish to use split lists, with a starting value for each list then jQuery or JavaScript will be required to assign the value.
Here’s a typical list entry with a start value:
<ol start="2" class="list-alternate"> <li>Quality Over Quantity</li> </ol>
And then the jQuery to work through all of the items
/* set start value for split lists */
jQuery('ol[start]').each(function() {
var val = parseFloat(jQuery(this).attr("start")) - 1;
jQuery(this).css('counter-increment','li-counter '+ val);
});
After the jQuery has run the list entry becomes:
<ol start="2" class="list-alternate" style="counter-increment: li-counter 1;"> <li>Quality Over Quantity</li> </ol>
CSS list counters can be used to add additional text to the numbering, position the numeric counter out of position, perhaps with fancy styling. It’s also possible to use a counter with other HTML elements such as <p., <div>.
