Understanding ::after / ::before CSS Selectors

::before and ::after are the pseudo elements which allows you to insert content onto a page from CSS (without it needing to be in the HTML).

The end result might not actually be in the DOM but it appears on the page as if it is.

[quads id=1]

Here is the sample executed code block for your quick understanding.

Let us understand the basics that are done here in the snapshot.

We have defined a DIV with a class name “testPseudo” and a single word content to it. This class is then used to provide the ::before and ::after pseudo classes to this DIV.

In the ::before and ::after pseudo classes we have used the content property. Just check the output of the same.

As the name implies for these pseudo classes, they insert the generated content to its appropriate position, i.e., before or after the HTML block element where they have been used for.

[quads id=2]

The value that we can use with content can be:

• String: content: “a string” – special characters need to be specially encoded as a unicode entity.
• Image: content: url(/path/to/image.png). Image is used at its original dimensions and cannot be resized. We can also use Gradients, since gradients are also a type of image.
• Nothing: content: “” – This is useful for clearfix and inserting images as background-images (set width and height and can even resize with background-size)

Pseudo Before-After Browser Support

[quads id=3]