What is pseudo element ::before and ::after in CSS?

What is pseudo element in CSS?

Pseudo-element in CSS is a keyword that is added to style a specific part of the selected element.

What are the pesudo elements in CSS?

::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()

::before pseudo element

::before creates a pseudo-element that is the first child of the selected element.

::after pseudo element

::after creates a pseudo-element that is the last child of the selected element.

Use case of ::before and ::after

Lets consider the following quote. Now we want to add double quote at the beginning and at the end of the quote.

<p class="quote">Where there is a will there is a way. </p>

Now in the CSS we could use pseudo element to add double quote at the beginning and at the end of the quote. See the following code:

.quote:before{content: '\201C';}
.quote:after{content: '\201D';}

Output

"Where there is a will there is a way."