Basic CSS Pseudo-Elements

[rifat28dddd]

Profession / 14 months
Frontend Developer PRO
Get a promising creative profession and 13 projects in your portfolio

4 060 ₽/month


Group 1321314347 (1)
Frontend Developer PRO
In this article, we will look at the main types of pseudo-elements, look at examples of use, study additional tools for changing the interface and answer the main question - how do pseudo-elements differ from CSS pseudo-classes.

The general syntax for pseudo-elements is as follows:

selector ::pseudo-element
property : value;

Keywords with double colons are pseudo-elements that jordan telegram data indicate their functionality with their names. There are many CSS pseudo-elements that perform different functions, but not all of them are supported equally by all browsers. So let's look at the most basic ones and apply them with the help of a CSS tutorial :

::before — adds content before an element. This is useful when you need to insert some symbol or decorative element before the text.


Example of inserting emoji before text using ::before. Source: author
::after - adds content after the element, similar to ::before, but at the end.

Example of inserting emoji after text using ::after
Example of inserting emoji after text using ::after. Source: author
The syntax of both pseudo-elements ::before and ::after necessarily includes the content property.