HTML CSS Exercise: Set count and insert it before elements

Last update on March 04 2024 06:51:41 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!doctype html><!-- Declares the document type and version of HTML -->
<html><!-- Opening tag for the HTML document -->
<head><!-- Opening tag for the head section which contains metadata -->
<title>HTML CSS Exercise - Set count and insert it before elements</title><!-- Title of the HTML document -->
<style> /* Opening tag for CSS styling */
ol { /* Selects all ordered lists */
counter-reset: Step; /* Resets the counter named "Step" to 0 for each ordered list */
list-style-type: none; /* Removes the default numbering style from ordered lists */
}
li:before { /* Selects the pseudo-element before each list item */
counter-increment: Step; /* Increments the counter named "Step" by 1 for each list item */
content: counters(Step,".") " "; /* Sets the content of the pseudo-element to the value of the counter "Step" followed by a period and a space */
}
</style><!-- Closing tag for CSS styling -->
</head><!-- Closing tag for the head section -->
<body><!-- Opening tag for the body section which contains the content -->
<ol><!-- Opening tag for the first ordered list -->
<li>item</li><!-- First list item -->
<li>item <!-- Second list item -->
<ol><!-- Nested ordered list -->
<li>item</li><!-- First nested list item -->
<li>item</li><!-- Second nested list item -->
<li>item <!-- Third nested list item -->
<ol><!-- Doubly nested ordered list -->
<li>item</li><!-- First item of the doubly nested list -->
<li>item</li><!-- Second item of the doubly nested list -->
</ol>
<ol><!-- Another doubly nested ordered list -->
<li>item</li><!-- First item of the second doubly nested list -->
<li>item</li><!-- Second item of the second doubly nested list -->
<li>item</li><!-- Third item of the second doubly nested list -->
</ol>
</li>
<li>item</li><!-- Fourth nested list item -->
</ol>
</li>
<li>item</li><!-- Third list item -->
<li>item</li><!-- Fourth list item -->
</ol><!-- Closing tag for the first ordered list -->
<ol><!-- Opening tag for the second ordered list -->
<li>item</li><!-- First list item -->
<li>item</li><!-- Second list item -->
</ol><!-- Closing tag for the second ordered list -->
</body><!-- Closing tag for the body section -->
</html><!-- Closing tag for the HTML document -->

Explanation:

This HTML document uses CSS counters to create custom numbering for ordered lists.
The CSS counter-reset property initializes the counter named "Step" to 0 for each ordered list.
The CSS list-style-type: none; removes the default numbering style from ordered lists.
The li:before selector targets the pseudo-element before each list item and increments the counter named "Step" by 1 for each list item.
The content property is used to display the value of the counter followed by a period and a space before each list item.
Nested lists are appropriately indented and numbered hierarchically.

Live Demo:

See the Pen set-counter-and-insert-before-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes