3

In this example the ::before pseudo-element's content is not a static value, but a counter. I want to get the current value "2" instead of the general formula "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>
Tamás Bolvári
  • 2,976
  • 6
  • 34
  • 57

0 Answers0