Псевдо-елементи CSS

• ::before - створює псевдоелемент перед всім вмістом елемента (на початку).
• ::after - створює псевдоелемент після всього вмісту елемента (наприкінці).

Наслідують стилі тих єлементів до котрих псевдло-елемент додаєтся. Завжди є «дітьми»

.box::after{
content'my text';
}

.box::after{
content'';
width: 50ps;
backgroud-color: green;
display: block
}

Додавання псевдо-елементу при події

.box:hover::after{
content'';
width: 50ps;
backgroud-color: green;
display: block
}