CSS ::before and ::after

What is a pseudo-element?

Pseudo element allows us to create elements that are not on the DOM, with the pseudo element we can style a specific part of the element content. Pseudo elements can be created only using the CSS, and that's why they are great, we can style a website without adding extra markup.

::before / ::after

Before and After (::before and ::after) are pseudo elements that allow us to insert content into a page from CSS. The browsers will render these elements as "generated content" if they have set a value in the content property. The difference between ::before and ::after is that when before is used the content will be inserted before any other content in the HTML, and the after is the opposite. The content value can be a string content: "some text";, image content: url(/image.jpg);, and an empty string content: "";.

Let's see the before and after elements syntax in the next example:

div::before {
  content: "Hello, World"
}

div::after {
  content: "Goodbye, World"
}

Initially, the pseudo-elements were made using just the single colon like (:before, :after), the double colon elements (::before and ::after) is an updated format. Almost all major browsers (Chrome, Firefox, Edge, Opera) support ::before and ::after pseudo-elements, just Internet Explorer and Safari are not supporting it. In Internet Explorer, the single colon format is still used.