CSS decoded ::before and ::after

What is a Pseudo Element in CSS?

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.

What is the use of ::before and ::after?

In CSS, ::before and ::after creates pseudo-elements that is the prepended and appended to the selected element respectively.

How do I use ::before and ::after in my website?

One really important thing to keep in mind while using ::before and ::after is to set content property in the CSS

selector::before{
/* without content the pseudo-elements will not work */
content: "";
}

After adding the content, you can style them just like any other element

Some simple examples of how ::before and ::after can bring you website to life are given below.

Quotes

Adding opening and closing quotes from CSS using ::before and ::after. The quote class can be used on any element to add quote-like styling.

Quotes using pseudo-elements Demo

Underline on Hover

CSS ::after is used to create an animated underline for links on hover (style prevalent in nav-links).

Underline on Hover Demo

Info on Hover

CSS ::after is used to create animated info displaying on hover (similar to the popups in Hacker Earth and Leet Code).

Info-block on Hover Demo

Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on February 28, 2021.

--

--

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

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
Tapajyoti Bose

Tapajyoti Bose

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast