Counter properties are used to show values while these
values(value, name or number) are specified by styling.
There are following properties are given below
1) counter-reset
This used for the creation or reset.
2) counter-increment
This is used for the increment to the specified value.
3) content
This is used for the creation of content.
4) counter()
and counters() function.
These function are used for adding the content.
These all properties are explained below.
An Example of counter properties
<
style
type
="
text/css
"
>
div
{
counter-reset
:
myCounter
;
border
:
2px solid lightgreen
;
padding
:
10px
;
overflow
:
auto
;
}
p::before
{
counter-increment
:
myCounter
;
content
:
"Para " counter(myCounter) ": "
;
font-size
:
16px
;
}
h2
{
color
:
green
;
font-size
:
35px
;
text-align
:
center
;
overflow
:
hidden
;
}
h4
{
text-align
:
center
;
}
<
/style
>
<
div
>
<
h2
>
Webtags.com.pk<
/h2
>
<
h4
>
CSS3 counter property<
/h4
>
<
h5
>
Numbers will be automatic incremented.<
/h5
>
<
p
>
First paragraph<
/p
>
<
p
>
Second paragraph<
/p
>
<
p
>
Third paragraph<
/p
>
<
/div
>
Output of above code
Webtags.com.pk
CSS3 counter property
Numbers will be automatic incremented.
First paragraph
Second paragraph
Third paragraph
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.