How to use CSS counter to prepend the index number before every children?

Question

I have a DOM like this:

<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>


<div>
<div>Tiger</div>
<div>Monkey</div>
<div>Fox</div>
</div>

How do I use CSS counter to let it rendered as:

1.A
2.B
3.C
4.D

1.Tiger
2.Monkey
3.Fox

I have tried this:

div > div:before {
  content: counter ("div > div");
}

But it fails.

Code snippet:

div>div:before {
  content: counter("div > div")
}

;

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>
<div>
  <div>Tiger</div>
  <div>Monkey</div>
  <div>Fox</div>
</div>

Use correct HTML, i.e. an
and
and it'll do it for you.
– Ian Devlin Feb 06 '23 at 08:43 — Ian Devlin, Feb 06 '23 at 08:43

mplungjan · Accepted Answer · 2023-02-06T08:46:38.927

2

Your use of counter("div>div") was incorrect

If you give the container a class, then you do not need the div>div

.container div::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: counter(section) ". "; /* Display the counter and a dot before the content of each nested div */
}

.container > :first-child {
  counter-reset: section;
}

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>


<div class="container">
  <div>Tiger</div>
  <div>Monkey</div>
  <div>Fox</div>
</div>

edited Feb 06 '23 at 08:46

answered Feb 06 '23 at 08:41

mplungjan

169,008
28
173
236

Question: why use `.container div::before` instead of `.container div:before`? – AGamePlayer Feb 06 '23 at 12:22
1

[pseudo element vs pseudoclass](https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements) – mplungjan Feb 06 '23 at 13:27

score 1 · Answer 2 · answered Feb 06 '23 at 08:42

Give container divs a class to reset it between lists and initialize counter in css.

.container{
   counter-reset: my-counter;
}

div > div::before {
   counter-increment: my-counter;
   content: counter(my-counter) ". ";
}

<div class="container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
    
    
<div  class="container">
    <div>Tiger</div>
    <div>Monkey</div>
    <div>Fox</div>
</div>

How to use CSS counter to prepend the index number before every children?

Code snippet:

2 Answers2