Counters are essentially variables maintained by CSS, and their values can be incremented by CSS rules to track their usage.
HTML CODE:
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
CSS CODE:
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
Description
You can create an ordered list using any type of HTML.
counter-reset
The initialization counter is the name of the counter.By default, the counter starts at 0.This property can also be used to change its value to any specific number.counter-increment
Used in countable elements.counter-reset
The value of the counter can be increased or decreased afteroneinitialization.counter(name, style)
Displays the value of the segment counter.Generally used forcontent
property.This function can accept two parameters, the first parameter as the name of the counter and the second parameter can bedecimal
orupper-roman
(bydecimal
default).counters(counter, string, style)
Displays the value of the segment counter. Generally used forcontent
property.This function can accept three parameters, the first parameter as the name of the counter, the second parameter can include the string after the counter, and the third parameter can bedecimal
orupper-roman
(bydecimal
default).CSS counters are especially useful for generating outline lists because new instances of counters are automatically created in child elements. Use
counters()
functions to insert delimited text between nested counters at different levels.
Post your comments / questions
Recent Article
- ModuleNotFounEerror:No module named celery in Django Project
- How to get domain name information from a Domain using Python
- ModulenotFoundError: no module named 'debug_toolbar' -SOLUTION
- How to create superuser in django project hosted in cPanel without terminal
- CSS & images not loading in django admin | cpanel without terminal
- Could not build wheels for mysqlclient, which is required to install pyproject.toml-based projects
- How to sell domain name on Godaddy (2023)
- TemplateSyntaxError at / Could not parse the remainder: ' + 1' from 'forloop.counter0 + 1'
Related Article