CODEWITHSUNDEEP
htmlcsspseudo-elementhtml-lists
EkremG
EkremG

Reputation: 131

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?

Upvotes: 6

Views: 5738

Answers (2)

A Haworth
A Haworth

Reputation: 36565

Nowadays we can use not just counters but also the ::marker pseudo element.

For example, as an answer to this question: How to replace the dot '.' from an ordered list of type 'a'

ol {
 list-style-type: lower-alpha;
 counter-reset: listcounter;
 padding-left: 30px;
}
li {
 counter-increment: listcounter;
}
li::marker {
 content: counter(listcounter, lower-alpha) ": ";
}
<ol type="a">
  <li>Element a</li>
  <li>Element b</li>
  <li>Element c</li>
</ol>

Upvotes: 0

Zeta
Zeta

Reputation: 105905

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>

Upvotes: 8

Related Questions