A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element. CSS pseudo-elements are used to add special effects to some selectors. There are different pseudo-elements which include ::first-child, ::first-line, ::before, ::after and so on.
CSS before (::before) and after (::after) pseudo-elements are used to add contents to the webpage before and after the selected element, respectively. These ::before and ::after pseudo-elements add fake elements to the HyperText Markup Language (HTML) document flow, i.e. they are not present in the HTML markup, but you see them on the webpage.
They basically work by appending either to the front (before) of the selected element or at the back (after) an element.
This doesn't show in HTML document flow or markup but shows on the webpage. It's easy to add them at whatever position without altering the HTML document flow.
For Example:
<p> Hello World</p>
To add content before the p tag, we would use the ::before pseudo-element. The same applies to the ::after pseudo-element. Select the tag in your CSS and add the before element. I.e.
p::before{
}
p::after{
}
The selector can also be a class selector. E.g.
<h2 class= "heading"> Second Heading</h2>
.heading::before{
}
An important property the ::before and ::after pseudo-element must take is the content property. The property value can take an empty string, text, image, or even a counter.
From the example above, I added an emoji as the content value for ::before pseudo-element and added "I am Sandra!" to the ::after pseudo-element. It's as simple as that. You do not need to restructure your HTML document structure to add extra elements to the webpage.
You could also style contents of pseudo-elements to suit any purpose.
In the example above, we created two circles, one before and one after the selected element.
You can also animate the ::before and ::after pseudo-elements.
The example above is a continuous animation using the ::after pseudo-element.
This button hover-effect shows up with the ::before pseudo-element covering the entire button smoothly.
::before vs :before
The single colon :before is peculiar to CSS 2 specification while double colon::before is specific to CSS 3 specification. The ::before initiated in CSS 3 differentiates pseudo-elements from pseudo-classes.
All browsers except internet explorer support the :: before whereas:before is still widely supported by all browsers. So you would still see people use the single colon :before in their code. It is correct but ::before is the modern way of using it.
Conclusion
This is the basic explanation and how CSS ::before and ::after pseudo-elements work. There are so many use cases for them that weren't covered, but they are versatile and help us solve different CSS problems, especially in animation. You get to know them more as you keep learning and practicing. Please share with me other use cases of ::before and ::after pseudo-elements that you know of. I'd love to learn from you. Thanks for reading.