Counter-increment self-increment multiple times is invalid

the problem encountered by the learning counter, the relevant information could not be found in two days of search.

question 1:

HTML:


<div>
    text
    text
    text
</div>

CSS:

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}

result:

1text1
2text2
3text3

because the tutorial says that wherever the counter-increment counter appears, it increments itself, so change the CSS to:

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);counter-increment:pl;}

are the two counter-increment counters incremented twice? So hope that there will be results

2text2
3text3
4text4

but. And then this thing shows up. Please

1text2
3text4
5text6

what does this mean?

< hr >

question 2:

is still based on the previous question. This time I put counter-increment separately

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
p{counter-increment:pl;}

result:

2text2
4text4
6text6

Although I didn"t imagine this conclusion, I seem to understand that the semantics of the two counter-increment are: counter self-increment step = 2. So from the beginning of 0, 2, 4, 4, 6.

forgive me for being paranoid all day long, so what happens if I add another counter-increment ?

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
p{counter-increment:pl;}
p{counter-increment:pl;}

is the step size = 3, so there is 3 br 6.
but I was fooled again
and the result remains unchanged. No matter how many counter-increment I add, the result is fixed in 2 counter-increment 6. No change

2text2
4text4
6text6

I have asked a lot of questions over the past two days, and sometimes I wonder if there are more reliable and in-depth tutorials, more examples and after-class tutorials. After all, W3C is too simple, and MDN has only one after-class question for each class. Come here to ask every time you have some questions. It"s very troublesome for everyone. I"m sorry.

CSS<strong></strong><strong></strong>: <ol> <li>CSSpp::beforep::after;</li> <li>CSScounter-incrementcontent;</li> <li></li> </ol> CSS1 (p::before)counter-increment:pl; (p::before)content:counter(pl); (p::after)counter-increment:pl; (p::after)content:counter(pl); the order in which question 2.1 is dealt with is (p)counter-increment:pl; (p::before)counter-increment:pl; (p::before)content:counter(pl); (p::after)content:counter(pl); the order in which question 2.2 is handled is p:pcounter-incrementpcounter-increment (p)counter-increment:pl; (p::before)counter-increment:pl; (p::before)content:counter(pl); (p::after)content:counter(pl);