Псевдо-елементи 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
}

Одночасне присвоювання однакових параметрів в before і after

.box::before, .box::after {
	font-size: 30px;
}

• content - дозволяє додати текстовий контент всередину псевдоелемента. Ця властивість є обов’язковою, без неї браузер просто не створить псевдоелемент. Якщо за макетом текстовий контент не потрібний, його значенням необхідно поставити порожній рядок.
• hover - щоб змінити стилі псевдоелемента при події на батьківському елементі