Fun with pseudo‑elements


I’ve known for quite a while that, you could inject content into HTML elements using CSS pseudo‑elements: ::before and ::after. But, they are way more useful than I originally thought…

The Simple Stuff

Simply put, pseudo‑elements let you inject CSS content immediately before or immediately after the content of the matched element.

For example, suppose I want all paragraphs in my document to start with the phrase “Yo dog, “. I could write:

p::before { content: "Yo dog, "; }
Xzibit would be proud!

Instead of using a string, one can also link to another resource using the url() css function. Here is a style that matches any anchor with an absolute url and injects an icon after them.

a[href^="http://"]:after, a[href^="https://"]:after {
  content: url('path-to-external-icon.png');
Adding images as content.

Got It! Anything Else?


The other day I ended up on MDN page for the content property. I noticed something new: the attr() value.

The attr() value returns the value of the attribute on the element as a string. I can make a context hover for external links to display thier href by doing something like this:

a { position: relative; }

a[href^="http://"]:hover:after, a[href^=https://]:hover:after {
  /* Display the href attribute */
  content: attr(href);

  /* Put it in a box */
  display: block;
  position: absolute;
  padding: 1em;
  border: 1px solid #666;
  background-color: #ccc;
Or… you could just use title attribute.

And now you have a no-js hover for links…

One Step Further!

Things got more interesting when I realized I could do the same with HTML5 data- attributes. Consider the following markup:

<div class="greet" data-greeting="Hola">Jim</div>

Then I could do something like this:

.greet:before {
  content: attr(data-greeting) " ";

Aparently this was old news. A quick google search turned up a bunch of people talking about it a while ago, but it was news to me! I’m not sure where I would get to use it, but I do like that it helps keep the DOM pretty and it makes it simple to update certain things from javascript.

var forEach =,
    changeToHello = function(elem) {
      elem.dataset.greeting = "Hello";

var greetings = document.querySelectorAll(".greet");
forEach(greetings, changeToHello);

It almost shadow-dom-esque. It’s nice not having to know the internals of how the element is going to consume the data- attribute, one can just update the elements’ state and be done.

The Future and Beyond…

There is one unimplemented feature that would also help make this technique a lot more powerful: the optional [type] argument of the attr() function. The spec defines such behavior but, as of writing this no browsers implement it.

.hasIcon:before {
  content: attr(data-icon-url url);
This would be great!

This would return the value of the data-icon-url attribute, but intrept it’s value as a url rather than just a string. It would be pretty useful for injecting icons…