Pseudo-Element Kung-Fu

I recently found that the content property can contain cooler stuff than just strings. For instance, you can show the href of a link in a cool popup with absolutely no JS:

content: attr(href);

See the Pen Pure CSS link hover popup by flyingfisch (@flyingfisch) on CodePen.

This allows us to show popups without JS as well, like so:

<span class="popup" data-popuptext="This is a CSS-only popup!">Hover!</span>

span.popup:hover:after {
    content: attr(data-popuptext);
}

And of course a live demo with the full source:

See the Pen Pure CSS hover popup by flyingfisch (@flyingfisch) on CodePen.

That’s all I’ve got, have fun messing around with content!