Making magic with before and after pseudo elements ✨
Tags: tutorial, codepen, css, basics
Published: 2019-12-24 14:02:27

---
title: Making magic with before and after pseudo elements ✨
published: true
description: I love pseudo elements and want to show you some cool uses for them.
tags: tutorial, codepen, css, basics
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5jsxkumtjzjxvgqtyqwo.jpg
---

**The before and after pseudo elements are used to add things like text and or styling outside the DOM. This means you cannot count on them being indexable by search engines and are only readable by screen readers depending on a user’s [screen reader + browser combination](https://thatdevgirl.com/blog/before-after-accessibility).**

They are however one of my favourite things to use because it allows you to add extra styling without adding extra elements. Consider for instance adding an icon to a button or extending the clickable area of a link.
In this article I talk about some basics you should know about pseudo elements, you can also skip straight to the [fun stuff](#fun-stuff)✨.

## What are pseudo elements?
Pseudo elements are keywords you can add to a css selector that allow you to style a specific part of the selected element. For example `::first-letter` can be used to add styling to the first character of an element.
Pseudo elements are recognisable by the double colons syntax, you should use `::before` and not `:before` (although that is also supported in all browsers) to distinguish it from pseudo classes like `:hover` and `focus`. This article focusses on `::before` and `::after` but [you can find other pseudo elements here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).
The naming suggests the elements to be inserted before and after an element but are actually inserted before and after the content of the element. This means that before has a lower z-index and after a higher z-index than the selected element.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sqmtcbvt6fyaf36eghey.png)

## The content property
Before and after pseudo elements need the content property to do their magic. This may have made you say "duh" out loud just now if you’ve only been using it to pre- or append text because that's when you actually needed the content property. Even if you don’t use the pseudo elements to show text you’ll need to leave it empty for it to even show up in your browser’s inspector.
```css
.list-item::before {
  content: ''; /* Even if you don't need the content element you have to add it. */
}
```

## Inheritance
Pseudo elements inherit [their parents’ inheritable behavior](https://www.w3.org/TR/CSS21/generate.html#before-after-content), for instance if you add a before to an anchor (a) tag it will inherit its `font-family` and `font-size` properties but also the fact that if you click it it’s still a link. This is incredibly useful if you want to make an entire block clickable but do not want to add an anchor link around the entire thing.
{% codepen https://codepen.io/Sidstumple/pen/QWwgbvq %}

## Fun stuff
Pseudo elements don't just have to be useful; a while ago I created a blowfish with css and used some before and after elements to add some shadows and spikes:
{% codepen https://codepen.io/Sidstumple/pen/yLLMoGJ %}

You can also use it to create photoshop-like effects like the duo tone effect, Spotify used to be a big fan of this effect😅. I had to do some research on what Photoshop actually does in this ready made effect and found a simple way to do it in sort of layers while using the `mix-blend-mode` property. 
In order for this to work you'll need two layers with different blend modes and one black and white picture. I actually just used `filter: greyscale(1);` on the image.
The blend moded layers are:
- A layer with a vibrant `background-color` like `hotpink` and `mix-blend-mode: multiply;`
- A layer with a dark `background-color` like `blue` and `mix-blend-mode: lighten;`

You can also use `linear-gradient` backgrounds which give a really cool effect but aren't animatable and I wanted to switch between color combinations.
I had to add a container to put the before and after on because setting them on self closing elements like `<img />` is still very unreliable.

The simplified version of the code is:
```html
<div class="container">
 <img src="https://media.mnn.com/assets/images/2017/06/closeup_meerkat_face.jpg.653x0_q80_crop-smart.jpg" />
</div>
```

```css
.container {
  position: relative; /* Necessary to make sure the before and after elements know what their bounds are. */
  width: 500px; /* Optional; to create a constraints for the image . */
  height: 500px;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1); /* Duo tone looks better with a black and white image */
}

.container::before, .container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* Make sure that also the before element is on top of the content of .container */
}

.container::before {
  background: hotpink;
  mix-blend-mode: multiply;
}

.container::after {
  background: blue;
  mix-blend-mode: lighten;
}

```
I spruced it up a bit and added a hover animation, I also created one with a [very lazy keyframe animation](https://codepen.io/Sidstumple/pen/ExammaG), but it doesn't seem to work in Safari (BOOOO!).
{% codepen https://codepen.io/Sidstumple/pen/NWPgGNB %}

## Now you
There are a lot more crazy things you can accomplish with pseudo elements, which are your favourites?