Using the ::before and ::after pseudo-elements as design elements

What are the ::before and ::after Pseudo-elements?

They both act like a child element of a parent element which is the CSS selector before the ::before or ::after pseudo-element.

How to use them?

You can use ::before and ::after pseudo-elements to add #1styles, #2image or #3content to an element in a more efficient way.

1 ) First things first, set a value to the ‘content’ property of the pseudo-element in order for other properties to work for it, even the value is an empty string.

2 ) The default value of their ‘display’ property seems to be inline, you can set the value of ‘display’ to be like ‘block’ or inline-block’. – This’s why I think browsers treat these pseudo-elements like a child element of a parent element.

3 ) Other properties that you can apply to these pseudo-elements are like ‘ position’, ‘transform’, ‘background-color’, ‘width’, ‘height’, ‘top’, ‘left‘ etc.

Example use case

Using ::after pseudo-element for adding some space between two inline elements.