Why pseudo ::before and ::after elements?

Question

I searched the web but I couldn't understand what is pseudo before and after elements.
I saw many people use these elements but still I couldn't understand from them.

Could anyone help me By explaining the thing in a different way?

Answer 1

Basically, ::before and ::after are used to add text or image before and after the content of an element respectively.

Check out this sample code and see if you can understand it better visually.

https://code.sololearn.com/W6Vvlig47RvP/?ref=app

Answer 2

for example: it use for adding content or space to an span or label, or adding image icon before a list of element, and any other by
content: 'PlaceOfYourData';

Answer 3

Thanks Jonathan Pizarra....
and also mohammad mehdi.