A CSS Pseudo Element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example,
::first-line can be used to style the first line of a paragraph,
::before can be used to prepend an element and style it as well, etc.
The main utility of the Pseudo Element is for cosmetic purpose only.
In CSS3 the Pseudo Elements are represented by
::<pseudo-element>, even though the CSS2 syntax
:<pseudo-element> still works on most browsers for the Pseudo Elements that were available in CSS2.
::after creates pseudo-elements that is the prepended and appended to the selected element respectively.
One really important thing to keep in mind while using
::after is to set
content property in the css
/* without content the pseudo-elements will not work */
After adding the content, you can style them just like any other element
Some simple examples of how
::after can bring you website to life are given below.
Adding opening and closing quotes from CSS using
::after. The quote class can be used on any element to add quote-like styling.
::after is used to create an animated underline for links on hover (style prevalent in navlinks).
::after is used to create animated info displaying on hover (similar to the popups in Hacker Earth and Leet Code).
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Reach out to me on: