Как использовать псевдоэлементы ::before и ::after в CSS?

• ::before добавляет контент перед элементом 34. Это полезно, когда нужно вставить какой-то символ или декоративный элемент перед текстом 3.
• ::after добавляет контент после элемента, аналогично ::before, но в конце 3.

1. Определить класс или идентификатор элемента, перед которым будет добавляться контент 1.
2. Включить специальное свойство content, внутри которого указывается, что должно быть внутри 4. Без этого свойства псевдоэлементы ::before и ::after работать не будут 4.

blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }
Скопировать

• Псевдоэлементы должны указываться сразу после селектора через двойное двоеточие без пробела 1.
• Можно использовать только один псевдоэлемент на селектор, то есть нельзя использовать сразу два псевдоэлемента для одного блока 1.
• По умолчанию созданные элементы являются строчными, поэтому при указании высоты или ширины необходимо установить свойство display: block 2.