Adding text before list

Question

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?

i saw that li.Madde:before {content:"Element"; text-indent: 10px;} add text. But i want to make a list Element 1 Element 2 but it does 1. Element 2. Element — EkremG, Feb 13 '12 at 09:41

Zeta · Accepted Answer · 2017-09-29T07:14:00.053

8

#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>

edited Sep 29 '17 at 07:14

answered Feb 13 '12 at 10:29

Zeta

103,620
13
194
236

It did what i want but i have one more problem with that. I have a nested list like: Element 1: bird Element 2: lion Element: white lion Element 3: dog when i want to create a nested list it gives increment for every li item and i dont want it to happen do you have any advice? – EkremG Feb 13 '12 at 11:37
I can't really reproduce your bug, but I think the `>` selector should help you. This will only select direct children. – Zeta Feb 13 '12 at 11:41
Right ">" helped me Thank you again Zeta :) – EkremG Feb 13 '12 at 11:44

score 0 · Answer 2 · answered Apr 13 '21 at 17:03

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>

Adding text before list

2 Answers2

Linked

Related