psevdo-elementi_css [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

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

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

<code>
.box::after{
content'my text';
}
</code>
<code>
.box::after{
content'';
width: 50ps;
backgroud-color: green;
display: block
}
</code>
Додавання псевдо-елементу при події
<code>
.box:hover::after{
content'';
width: 50ps;
backgroud-color: green;
display: block
}
</code>
Одночасне присвоювання однакових параметрів в before і after
<code>
.box::before, .box::after {
	font-size: 30px;
}
</code>
===== Властивості =====
  * **content** - дозволяє додати текстовий контент всередину псевдоелемента. Ця властивість __є обов’язковою__, без неї браузер просто не створить псевдоелемент. Якщо за макетом текстовий контент не потрібний, його значенням необхідно поставити порожній рядок.
  * **hover** -  щоб змінити стилі псевдоелемента при події на батьківському елементі