8.1 Види псевдоелементів
Псевдоелементи в CSS дозволяють стилізувати певні частини елементів, такі як перша літера, перший рядок або додати вміст перед або після елемента. Вони надають додаткові можливості для стилізації, які не потребують зміни HTML-структури. Псевдоелементи позначаються подвійними двокрапками (::).
Основні псевдоелементи:
::before::after::first-letter::first-line
8.2 Псевдоелемент ::before
Псевдоелемент ::before додає вміст перед вмістом елемента. Його часто використовують для додавання декоративних елементів, іконок або додаткового тексту.
Синтаксис:
селектор::before {
content: "" | "текст" | url() | counter | attr();
властивість: значення;
}
У полі content вказується html-код того, що треба додати.
/* Додає стрілку перед кожним елементом списку */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Перший елемент списку</li>
<li>Другий елемент списку</li>
<li>Третій елемент списку</li>
</ul>
8.3 Псевдоелемент ::after
Псевдоелемент ::after додає вміст після вмісту елемента. Його часто використовують для додавання декоративних елементів, іконок або додаткового тексту.
Синтаксис:
селектор::after {
content: "" | "текст" | url() | counter | attr();
властивість: значення;
}
У полі content вказується html-код того, що треба додати.
/* Додає точку після кожного елемента списку */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Перший елемент списку</li>
<li>Другий елемент списку</li>
<li>Третій елемент списку</li>
</ul>
8.4 Псевдоелемент ::first-letter
Псевдоелемент ::first-letter застосовується до першої літери елемента. Його часто використовують для створення декоративних початкових літер у параграфах.
Синтаксис:
селектор::first-letter {
content: "" | "текст" | url() | counter | attr();
властивість: значення;
}
Приклад:
/* Збільшує і змінює колір першої літери кожного параграфу */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Це приклад тексту у параграфі.</p>
<p>Ще один приклад тексту у параграфі.</p>
8.5 Псевдоелемент ::first-line
Псевдоелемент ::first-line застосовується до першого рядка елемента. Його часто використовують для стилізації першого рядка параграфу.
Синтаксис:
селектор::first-line {
content: "" | "текст" | url() | counter | attr();
властивість: значення;
}
Приклад:
/* Змінює колір і робить напівжирним перший рядок кожного параграфу */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Це приклад тексту у параграфі, який містить достатньо тексту, щоб розбитися на кілька рядків, демонструючи, як працює псевдоелемент ::first-line. Перший рядок кожного параграфа буде виділений напівжирним шрифтом і кольором navy, щоб привернути увагу читача. Цей ефект досягається за допомогою CSS-правила, яке ми визначили вище.
</p>
<p>
Зверніть увагу, що стилізація застосовується лише до першого рядка, незалежно від його довжини. Решта тексту у параграфі зберігає свій початковий стиль. Це може бути корисним для виділення ключових моментів або створення візуального ритму у тексті.
</p>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ