CSS Properties: How to set the content as a counter?

Last update on February 21 2024 12:45:48 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the content as a counter</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
p {
 counter-increment: myIndex; /* Increments the value of the counter 'myIndex' for each <p> element */
}
p:before {
 content:counter(myIndex); /* Inserts the value of the counter 'myIndex' before each <p> element */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Inserts a paragraph element with strong emphasis -->
<p>A good web development tutorial.</p><!-- Inserts another paragraph element -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use CSS counters to generate sequential numbering for specific elements.
The CSS rule p selects all <p> elements in the document.
The counter-increment: myIndex; property increments the value of the counter named 'myIndex' for each <p> element.
The CSS rule p:before selects the pseudo-element ::before of all <p> elements.
The content: counter(myIndex); property inserts the value of the counter 'myIndex' before each <p> element, effectively displaying a sequential number before each paragraph.

Live Demo:

See the Pen content-counter-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page