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