w3resource

HTML CSS Exercise: Set count and insert it before elements

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.