Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding text before list

I am trying to make a list like
Element 1. bird
Element 2. lion
...

The problem is I don't want to write "Element" for every item. Is there any way to add content to my list?

like image 871
EkremG Avatar asked Feb 13 '12 09:02

EkremG


1 Answers

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>
like image 154
Zeta Avatar answered Oct 19 '22 00:10

Zeta