Adding text in front of a list

Question

I am trying to make a list, for example, Element 1. bird
Element 2. Lion
...

The problem is that I do not want to write an "Element" for each element. Is there any way to add content to my list?

Answer 1

You need CSS counters :

#customlist { /* delete default counter */ list-style-type: none; /* create custom counter and set it to 0 */ counter-reset: elementcounter; } #customlist>li:before { /* print out "Element " followed by the current counter value */ content: "Element " counter(elementcounter) ": "; /* increment counter */ counter-increment: elementcounter; } 

 <ol id="customlist"> <li>Elephant</li> <li>Bird</li> <li>Lion</li> </ol>