CSS counters

CSS counters:

CSS counters are similar to variables. These are maintained by CSS and those values can be incremented by CSS rules to track how many times they are used.

CSS Counter Properties:

Following is a list of properties that are used with CSS counter:
1) counter-reset: It is used to create or reset a counter.
2) counter-increment: It is used to increment the counter value.
3)content: It is used to insert generated content.
4) counter() or counters() function: It is used to add the value of a counter to an element.
Note:Before using a CSS counter, it must be created with counter-reset.

Example
<!DOCTYPE html>

<html>

<head>

<style>

body { counter-reset: section; }

h2::before { counter-increment: section; content: “Section ” counter(section) “: “; }

</style>

</head>

<body>

<h1> Example of CSS Counters:</h1>

<h2> Java Tutorial</h2>

<h2> HTML Tutorial</h2>

<h2> CSS Tutorial</h2>

<h2> Oracle Tutorial​</h2>
<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

 

Output

Example of CSS Counters:

Java Tutorial

HTML Tutorial

CSS Tutorial

Oracle Tutorial

Note: IE8 supports these properties only if a !DOCTYPE is specified.

 

Leave a Reply

Your email address will not be published. Required fields are marked *