Why we use Pseudo-elements in CSS?

Apart from the multiple instances of the same html element if you want to apply some effect on portion of an element(first letter etc) or on some selectors you use pseudo-elements

A pseudo-element in CSS is a keyword added to a selector that lets we style a specific part of the selected element(s).

CSS pseudo-elements are used to add special effects to some selectors.

for example

p::first-line {color:#ff0000;font-variant:small-caps;}

this will add effect to only first line of the <p>