Псевдо-елементи 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 - щоб змінити стилі псевдоелемента при події на батьківському елементі