More attributes is fun!

Sometimes CSS is more competent than you might have thought about. One of those insight is that we have a lot of CSS functions and don’t always need to depend on javascript to do cool stuff. Just look at this one.

<p class="counter" data-value="1">big elefant</p>

.counter::before {
  content: attr(data-value);
  color: hotpink;
}

What does it really do? The ‘attr’ function gets the data value from the selected element and uses it in the stylesheet to show it and make it lovely pink. Works really well in both ‘::before’ and ‘::after’ pseudo elements for ‘content’. Support for other properties then ‘content’ is still experimental, but I bet you can come up with fun stuff with this one.