Journal for Developers

Understanding ::after / ::before CSS Selectors

0 48

Notice: Undefined index: rate in /home/content/p3pnexwpnas11_data03/84/3795084/html/wp-content/themes/publisher/includes/functions.php on line 5360
1 min read

::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:

  • Stringcontent: “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

ChromeSafariFirefoxOperaIEAndroidiOS
4.0+3.1+3.5+7.0+
Partial from 4.0
9.0+
Partial from 8.0
YesYes

[quads id=3]

Subscribe to our Journal

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!