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?

Alliterate

Which language are you referring to? – Lonnielonny

I am trying to do it with HTML – Alliterate

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 – Alliterate

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>

Dry

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? – Alliterate

I can't really reproduce your bug, but I think the > selector should help you. This will only select direct children. – Dry

Right ">" helped me Thank you again Zeta :) – Alliterate

Answer 2

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>

Samuelsamuela