::Before and ::After in CSS made easy

Hello, People

Today we are going to learn about pseudo-elements, one of the most useful CSS properties.
Pseudo-elements in CSS allow us to add content to a page without adding additional HTML elements.
Seems confusing? Okay, in simple terms.

Pseudo-elements are like a shadow, which can be seen but not able to touch.

I can assure you that if you master these topics, you will use them all over your project. Without wasting time let us dive in.

::Before

Before selector is used to position content before the content of the selected element.

Syntax

We need to add the item with the keyword ::before with the required content property. The content can be any string or even blank.

     element::before{
      content: "";
     }

Note: before and after pseudo-elements will not work without content property.

Example

::After

The after pseudo-element can be used to position content after the content of the selected element.

Syntax

We need to add the item with the keyword ::after with the required content property.

     element::after{
      content: "";
     }

Example

Note: These elements are inline by default

I Hope, the blog was useful. If there are any queries feel free to ping me on Twitter. Now as a task you can create the below image using before and after pseudo-elements.

The solution can be found here Codepen

For more about Pseudo Elements, refer below websites:

• MDN Web-Docs
• CSS Tricks