"Let's say we wanted a React component that renders a few lines of text, where the number of lines is received as a prop. But we also want to display line numbers next to each line, and we want to use CSS to do so. That last assumption might seem silly, but bear with me; we'll look at a real-world use case at the end."
"If you wanted to increment by some other value than 1, you can specify whatever counter-increment you want: And if you wanted to just set a counter to a specific value, the counter-set property is for you. There's a few other options that are of course discussed on MDN. I know this seems silly, and I know this would have been simpler to do in JavaScript. The counter variable is already right there."
"Let's get slightly more realistic. What if you have various headings on your page, representing section titles. And, as you might have guessed, you want them numbered. Let's start by reseting a CSS counter right at the root of our page Then we'll increment and display that counter for each heading that happens to be on our page. And if we want custom formatting on the line numbers, we can list out strings, and CSS will concatenate them."
CSS counters provide a way to number elements using only CSS via properties such as counter-reset, counter-increment, and counter-set. A CSS counter can be reset per container and incremented for each child element, with the current value rendered in a pseudo-element. The counter-increment property can change step values and counter-set assigns specific starting values. Practical uses include numbering lines in a rendered component and auto-numbering page headings. Custom formatting can be achieved by listing strings that CSS concatenates. The approach offers a pure-CSS alternative to JavaScript for visual numbering tasks.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]