Различия

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

--- psevdo-elementi_css [2023/09/26 17:26]
tro
+++ psevdo-elementi_css [2023/09/27 19:23] (текущий)
tro
@@ Строка 2: / Строка 2: @@
   * ::before - створює псевдоелемент перед всім вмістом елемента (на початку).
   * ::after - створює псевдоелемент після всього вмісту елемента (наприкінці).
+Наслідують стилі тих єлементів до котрих псевдло-елемент додаєтся. Завжди є "дітьми"
+<code>
+.box::after{
+content'my text';
+}
+</code>
 <code>
 .box::after{
@@ Строка 10: / Строка 18: @@
 }
 </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** -  щоб змінити стилі псевдоелемента при події на батьківському елементі