Различия

Показаны различия между двумя версиями страницы.

--- psevdo-elementi_css [2023/09/26 17:23]
tro создано
+++ psevdo-elementi_css [2023/09/27 19:23] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Псевдо-елементи 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** -  щоб змінити стилі псевдоелемента при події на батьківському елементі