2

在这个例子中 ::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>

4

0 回答 0