how is ::before and ::after is used?

Question

what property and value will I use? Thanks!

Answer 1

::before specifies some content before a specific element

::after specifies some content after a specific element

DEMO example:

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

You can use them, for example... to add some icon in an input text, Font Awesome requires ::before/::after for insert some icons from CSS code, just an example. :)

Answer 2

Maz is right.

::before & ::after is css tricks(called Psuedo-class)
They have cotent property.
You can add text or image with content property.

+ PS
They were :before and :after in CSS2.
::before and ::after is for CSS3.

It does not make a problem but you cant use :before and :after if IE version is lower than IE8.

Answer 3

::before and ::after can even be manipulated for neat effects (follow the orange and blue dots; those are the psuedo-elements:

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

Here, I'm using them while counting:

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

Answer 4

The ::before and ::after pseudo classes can be used to create a step wise fill form for users of a website.
Have you ever noticed on most sites where you see, "step 1, step..."? Your before and after helps you a lot in that.

You could also use them to create chat boxes that have some kind of pointed end at one side.
In all, you just need to think out of the box when you use them.