Last Updated: February 25, 2016
· benorudolf

Pseudo elements and attributes

A pseudo element may get it's content value from the element's attribute:


<a href="bar" class="foo">Hello</a>


.foo:after {
      content: attr(href)   /* this will return 'bar' */

This functionality can come handy in many situations, especially with the new data-name attribute available.

If you use a typeface for an icon. Let's say you have a 'Click me' button and you want to change that with the type-icon. The icon's character is for instance 'X'. Putting 'X' isn't really semantic, so what we do is this:

  1. Create a 'data-icon' attribute on the element with the value of 'X', leaving the element semantic
  2. In css, create the pseudo element, read the attribute value of 'data-icon' and switch the text with the icon (you can do this in many ways - indenting for one)

This is just one of many things. Try it out and embrace the capabilities :)

Have a fresh tip? Share with Coderwall community!

Post a tip
Related Tags