CSS Counters:
CSS counters are similar to variable in a programming language. Counter values are incremented by rules define in CSS. Variables are required to manipulate counter value are as follows:
counter-reset - This variable is used to create or reset a countercounter-increment - This variable is used to increment a counter valuecontent - Used to insert generated content
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: count;
}
h3::before {
counter-increment: count;
content: "Counter Value " counter(count) ": ";
}
</style>
</head>
<body>
<h1>CSS Counters Demo:</h1>
<h3>HTML Tutorial</h3>
<h3>CSS Tutorial</h3>
<h3>JavaScript Tutorial</h3>
</body>
</html>
In the above example using content variable we have inserted "Counter Value" in each <h3> tag and there is also a counter used which will increment Counter Value.
You can check the output of above example here: https://jsfiddle.net/jbktux1g/
0 Comment(s)