在这个例子中 ::before 伪元素的内容不是一个静态值,而是一个计数器。我想获得当前值“2”而不是通用公式“counter(itemcounter)”。
// Expected value is 2 instead of counter(itemcounter).
alert(window.getComputedStyle(document.querySelector('li:nth-child(2)'), '::before').getPropertyValue('content'));
ul {
counter-reset: itemcounter;
list-style-type: none;
}
li {
line-height: 20px;
margin-bottom: 10px
}
li::before {
background: #000;
border-radius: 10px;
color: #fff;
counter-increment: itemcounter;
content: counter(itemcounter);
display: block;
float: left;
font-family: sans-serif;
font-weight: 700;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>