Understanding CSS Before and After Pseudo-Elements

Original Image Source: Photo by Branko Stancevic on Unsplash

Most likely along the line somewhere, you must have come across ::before (or :before) and ::after (or :after) in some CSS codes and have been asking what they are and what exactly they are used for. Those you see there are referred to as pseudo-elements. As the name pseudo implies, they’re anonymous as they are used to apply styles to sections in web pages without actually defining any new HTML element. Today I will be showing you how they can be applied to style web pages and the implications of using them (::before and ::after).

Please note that either the single colon (:) or double (::) colon can be used to implement the before and after pseudo-elements, but the double colon is what is used in CSS3. It was introduced to distinguish the pseudo-elements from the pseudo-classes.

Before (::before)

As the name implies, the ::before element is used to create and style an anonymous element before the main content of the element we’re actually dealing with. A lot of people have a misconception that pseudo-elements are created outside of the element it is applied to like the image below shows.

But it actually isn’t so. The pseudo-elements are created within the element we’re dealing with as shown below.

NOTE: To implement a visible pseudo-element, it must take in one very important property: content. If this property is not defined all the applied styles will not be visible.

EXAMPLE:

Using the ::before pseudo-element to insert an opening quotation mark.

After (::after)

This is the same as the before pseudo-element, but this time the anonymous element is created after the element being dealt with — not out of the element, but still within the element.

EXAMPLE:

Using the ::after pseudo-element to insert a closing quotation mark.

That’ll be all for now. In my next article I’ll be showing you how to make a tool tip without JavaScript using just the ::before or ::after pseudo-elements.

Thanks.

Originally published on ICODEMAG

Software developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store