HTML & CSS · Middle · Question 64 of 75

How can CSS number headings like "Step 1", "Step 2" automatically?

.steps { counter-reset: step; }
.steps h3::before {
  counter-increment: step;
  content: "Step " counter(step) ": ";
}

✓Correct answer: With CSS counters: counter-reset, counter-increment and counter()
2With list-style: decimal on headings
3It isn't possible without JavaScript

Explanation

Counters update automatically when items are added or removed. Generated content in ::before isn't selectable and may not be announced consistently by screen readers, so don't put essential info there.

How can CSS number headings like "Step 1", "Step 2" automatically?

Explanation

Further reading

Problem with a question

Test yourself