Pseudo-element Fun #1

Line-breaks in pseudo-element content text

Pseudo-elements, including the popular :before and :after selectors, allow limited generation of content via the content property. Most people don't know, however, that while you cannot put HTML inside of the content property, you can insert forced line breaks with the \a or \A escape sequence. However that alone will not result in a line break, as with text in the markup it is treated as a regular space. So the white-space property must be set to force treatment of it as desired.

View an archived version of the original demo of this.

CSS 3D Transforms and Pseudo-elements

Since the last item was kinda boring, and despite the title quite possibly not fun, here's another item to balance out. Pseudo-elements can be used for a lot of things from the practical to the silly so here we're going to use them to make two items appear to rotate in 3D space around each other. Why not?

For simplicity this only targets the current major browsers (as even the latest Opera's based on Blink now recognize -webkit-) but the demo page linked from the end of this section will cover more.

Basics

First let's set up a base element and position the pseudo-element children. The first one need only be translated by the radius of our eventual circle but the second must be rotated so it sits opposite the first.

Finally we can add the an animation to the parent element to make the elements orbit an unseen center. I originally tried to animate the pseudo-elements themselves, but one would always appear in front of the other, making the effect seem a bit odd. By rotating the parent instead, this problem is avoided.

For a complete all-in-one example of this, please see the demo page. Thank you for reading.