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
- Fix-Gradient effect turning to gray in after effects
- How to blur an image in python?
- ModuleNotFoundError: No module named 'whois' in Python GoviralHost Without Terminal
- How to Convert Image to Pencil Sketch in Python?
- AttributeError: module 'urllib' has no attribute 'request' - Python
- How to Extract audio from video files using python?
- PermissionError: [Errno 13] Permission denied: 'shampoo_sales.csv' - Python
- [WinError 145] The directory is not empty: 'FolderPath' - Python
Related Article