How they work

The ::before and ::after Pseudo-elements are used to add content before and after the main content. As an example, in the codepen below you'll see that the before content (cyan) is before the main content and the after content (red) is after the main content. To make it you first add the element or class you're selecting then add a ::before or ::after or both. Then you add the content property, without it the psuedo won't be created. After that you can style it in any way you want.

h1::before {
  content: 'pick';
  background-color: cyan;
}

h1::after {
  content: 'relevent';
  background-color: red;
}

The Content

Strings aren't the only things you can put as content. You can also add images using the url constructor, however it won't show any content that you put in it since the computer believes that the image is the content itself. let's say you didn't want to put quotation marks on your main content even though it's a quote, you can type open-quote or close-quote in the content property. If you're using the before pseudo as a counter for ordered lists, you can use the counter constructor and choose the way you want the order to be.

A way to use it

A common way to use it is by giving the user a description of something that they hover over. We simply do this by using either a before or after element, the content will be the description. After that, we stylize it and then position it near the main content. It will have an opacity of 0 but when it's hovered it'll be 100%, we give it the transition by using the transition property and setting it to 0.3 seconds. On the codepen below, we'll get its definition if we hover on the word below!