pseudo-elementos

What is the purpose of the "::before" and "::after"pseudo-elements?

I find many codes that use these pseudo-elements and I get "flying" when I see them. The few tutorials I found on the internet did not explain clearly and I was left with even more doubts. after all, what is their purpose/function?

The pseudo elements:after and: before work on which input types

I would like to know if there is any documentation or article that says where exactly we can use ::after and ::before I hav ... ied to find a correct application list of these pseudo elements, but nothing very certain... Does anyone have an explanation?

Using pseudo-elements: after in a DIV simulating an input with LABEL - the Pseudo-element overlays the cursor. How to do not overlap the cursor?

I created an editable DIV simulating an input with a LABEL using the pseudo-element ::after and the pseudo-class :empty. The ... See in the image below that the top of the cursor (pointed by the Red Arrow) appears from leaving behind the LABEL.