The Finer Details: Using CSS Pseudo Elements to Spice Up Your Website
Pseudo-elements are a really fun way to add some aesthetic appeal to your web design. Lately I’ve been on a bit of a pseudo-element kick and thought I’d share a few tricks I picked up.
The word pseudo is defined as fake, phony or false. In the case of pseudo-elements, they are used purely for decorative purposes and do not exist in the DOM. For this reason, you want to be sure the element generated isn’t essential to your site’s usability. That said, here are a few examples in which pseudo-elements can be applied.
1. Lines, a.k.a Border Pieces
Let’s start by taking a section of design that includes an image and some text.
By adding a pseudo-element in the form of a line, you can add some flair to your design.
To understand how this is accomplished, let’s have a look at the code.
In this example the text element has the class of
mlk-quote__text. Since a line is added before the text, the
::before selector is best applied to the element. It’s important to note moving forward that the real element is considered the parent, while the pseudo-element you’re creating is treated as the associated child element.
To create any pseudo-element, the content property is essential. To draw the line you’ll need to leave it as an empty string (quotes). This will effectively create an empty dimensionless box for you to build from. To build and display the line you’ll need three things:
To create the line you simply add height and width. Now that your element has dimension, make it visible by adding background colour. Beautiful! Finally, use positioning to place the line. Since pseudo-elements are child elements, add
position: relative to the
mlk-quote__text parent and
position: absolute to its child,
mlk-quote__text::before. Now all you need to do is use the top, right, left and bottom properties to position the line. Et voilà!
Similar to how the line is applied before the element, you can use the
::after selector to place the line after/under the text.
With a bit of dimension tweaking, you can also create vertical lines. Avoid the temptation to create a line by adding an adjacent element and giving it a border line. This will add unnecessary clutter to your code and could be read by a screen reader if not treated properly.
2. Bisecting Lines
Using a method similar to the above example, you can also use pseudo selectors to create lines that bisect text. Here we add decoration to Martin Luther King, Jr.
Since the parent element is the text, using percentages is easiest when finding the vertical position. You can also use the width you’ve assigned to the line as an indicator of your horizontal positioning.
3. Images, Icons and Baby Bunnies
Images and icons can be added as pseudo-elements in the same way that an image is reference in the image
src attribute or
Note how the quotations are removed. If not removed, the content value would be recognized as a string and displayed on the page as text.
One example where generating image content can be useful is with unordered lists. Since list item markers are limited in how they can be positioned, you can add them in as pseudo-elements and position them accordingly.
In this adorable example, the
list-item is the parent to which the pseudo selector is applied. Once you’ve added the absolute or relative url to the content property, positioning can be used to move the image.
Protip: Characters can also be added as content by inserting the unicode.
A complete list of unicodes can be found here.
Having empty quotations is super exciting, as it means you have an empty canvas from which you can play! There are many shapes you can create, but let’s create a speech bubble to hammer down the fundamentals. Creating the bubble is the easy part, but what about the little tail that sticks out of the bubble?
Step 1: Adding border to a dimensionless box
Yup, you read that correctly. Just because empty quotes means your content has no dimension, doesn’t mean you can’t add border. So let’s do it.
Start by adding a border with a decent amount of border width.
Since the content of the pseudo element is dimensionless, all that remains is the border, represented by a triangle on each side.
For purposes of demonstration, the parent element here is a simple
<div> with a class of
container. It has no style.
Step 2: Add transparency to the border sides you don’t need
When making shapes using borders, it’s important to note that at least two borders need to have width in order for your content to exist. It’s science. To avoid the horrors of non-existence, just give transparency to three of the border sides.
All that’s left visible is border-right. It’s starting to look like the tail of a speech bubble but that flat bit on the tip is still there.
No worries. You can use magic to fix it. It’s actually positioning, but I use magic as an excuse because I’m not entirely sure why it works yet. Now, using some of that magic…
It worked! What’s left is a perfect triangle. The picture also outlines how the
border-width is measured. Armed with this knowledge, you can now manipulate the dimensions of the triangle. Hint: change the
border-width of the invisible sides to affect the dimensions of the visual side.
Step 3: Make the bubble
Now that you have the skills you need to create the tail, all that’s left to do is add it to an actual bubble. Let’s go all the way back to the original example and create one.
Huzzah! As it’s noted in the code,
border-width is an indictor of how many pixels you’ll need to position the tail.
Triangles and speech bubbles are only one example of the cool things you can do with css shapes. To level up your shape game, have a look at this great site for inspiration.
Accessibility and Drawbacks
As previously stated, pseudo-elements should only be used for aesthetic purposes. They should not be essential to the flow of your website, as they don’t exist in the DOM and will be ignored by screen readers.
Pseudo-elements show major browser support, including browsers used by 95.65% of the world’s users. There are three known issues according to caniuse.com
- Firefox & Edge do not support
:beforefor input fields
- IE9, IE10, IE11 ignore CSS rem units in the line-height property. Bug report.
- Chrome supports CSS transitions on generated content as of v. 26. Safari v6 and below do not support transitions or animations on pseudo elements.