Пошук уроків, статей та іншого контенту
Дізнаєтеся, як створювати декоративний вміст і стилізувати частини елементів за допомогою псевдоелементів.
Псевдоелемент — це спеціальна частина HTML-елемента, яку можна стилізувати за допомогою CSS, хоча окремого елемента для неї немає в HTML.
Псевдоелементи часто використовують для:
декоративних ліній і фігур;
іконок та маркерів;
лапок у цитатах;
стилізації першої літери або першого рядка тексту;
оформлення підказок і бейджів.
Назва псевдоелемента починається з двох двокрапок:
selector::pseudo-element {
property: value;
}Наприклад:
p::first-letter {
color: darkred;
}Це правило змінює стиль першої літери кожного абзацу.
Псевдоелемент не потрібно додавати в HTML. Браузер візуально створює його під час відображення сторінки.
::before і ::afterНайчастіше використовують два псевдоелементи:
::before — створює вміст перед вмістом елемента;
::after — створює вміст після вмісту елемента.
Для них зазвичай обов’язково вказують властивість content.
.card::before {
content: "Новинка";
}
.card::after {
content: " →";
}Якщо content не вказано, псевдоелемент зазвичай не відображається.
<p class="note">Це важливе повідомлення.</p>.note::before {
content: "Увага: ";
font-weight: bold;
color: darkorange;
}
.note::after {
content: "!";
color: darkorange;
}У результаті перед текстом з’явиться Увага:, а після нього — знак оклику.
Вміст властивості content у цьому прикладі є декоративним текстом. Такий текст не записаний безпосередньо в HTML.
::before і ::afterПсевдоелементи зручно використовувати для створення ліній, підкреслень та інших декоративних деталей.
<h2 class="title">Наші переваги</h2>.title {
position: relative;
display: inline-block;
}
.title::after {
content: "";
display: block;
width: 60%;
height: 4px;
margin-top: 8px;
background-color: royalblue;
border-radius: 2px;
}Порожнє значення content: "" створює псевдоелемент без тексту. Його можна оформити як звичайний блок.
У цьому прикладі:
display: block розміщує лінію на окремому рядку;
width визначає довжину лінії;
height визначає її товщину;
margin-top додає відступ від заголовка.
Псевдоелементи часто використовують разом із position: absolute.
Батьківському елементу в такому разі задають position: relative, щоб псевдоелемент позиціонувався відносно нього.
<div class="avatar">
<span>Олена</span>
</div>.avatar {
position: relative;
width: 160px;
padding: 20px;
border: 1px solid #cccccc;
border-radius: 8px;
}
.avatar::before {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: mediumseagreen;
border-radius: 50%;
}Псевдоелемент ::before створює зелену крапку у верхньому правому куті блоку.
Якщо для батьківського елемента не вказати
position: relative, абсолютне позиціонування може прив’язатися до іншого предка або до сторінки.
contentВластивість content визначає вміст псевдоелемента.
.external-link::after {
content: " ↗";
}Текст потрібно записувати в лапках.
.decorative-line::before {
content: "";
}Цей варіант використовують для псевдоелементів, які мають лише фон, розмір або межі.
Псевдоелементи можуть відображати значення CSS-лічильників. Це дає змогу нумерувати заголовки або елементи списку. Для початкового рівня важливо знати, що content може містити не тільки звичайний текст, а й спеціальні CSS-значення.
Нижче наведено приклад картки з декоративною міткою, лінією та стрілкою.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Псевдоелементи</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px;
font-family: Arial, sans-serif;
background-color: #f2f5f9;
}
.card {
position: relative;
max-width: 360px;
padding: 28px;
background-color: white;
border: 1px solid #d9e0e8;
border-radius: 12px;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.card::before {
content: "Популярне";
position: absolute;
top: 16px;
right: 16px;
padding: 5px 9px;
color: white;
background-color: #e76f51;
border-radius: 999px;
font-size: 12px;
font-weight: bold;
}
.card h2 {
position: relative;
margin: 0 0 16px;
color: #1d3557;
}
.card h2::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 8px;
background-color: #457b9d;
border-radius: 3px;
}
.card p {
margin: 0;
color: #4a5568;
line-height: 1.6;
}
.card p::after {
content: " →";
color: #e76f51;
font-weight: bold;
}
</style>
</head>
<body>
<article class="card">
<h2>HTML та CSS</h2>
<p>Вивчайте основи створення вебсторінок</p>
</article>
</body>
</html>У прикладі:
::before створює мітку Популярне;
h2::after створює декоративну лінію під заголовком;
p::after додає стрілку після тексту;
position: relative на .card дає змогу правильно розмістити мітку.
::first-letter::first-letter стилізує першу літеру текстового блоку.
<p class="intro">
Веброзробка починається з розуміння структури сторінки.
</p>.intro::first-letter {
color: #c1121f;
font-size: 2.5em;
font-weight: bold;
}Псевдоелемент часто використовують для декоративного оформлення першої літери абзацу.
::first-line::first-line стилізує перший рядок тексту. Точна довжина цього рядка залежить від ширини елемента та розміру шрифту.
.intro::first-line {
font-weight: bold;
color: #1d3557;
}Якщо змінити розмір вікна браузера, склад першого рядка може змінитися.
::selection::selection стилізує текст, який користувач виділив мишкою або клавіатурою.
::selection {
color: white;
background-color: #457b9d;
}Можна також обмежити стиль певним елементом:
.article::selection {
color: white;
background-color: #2a9d8f;
}::marker::marker стилізує маркер елемента списку — крапку, число або інший маркер.
<ul class="features">
<li>Проста структура</li>
<li>Зрозумілі стилі</li>
<li>Зручне редагування</li>
</ul>.features li::marker {
color: #e76f51;
font-size: 1.2em;
}Псевдоелемент застосовується до маркерів li, а не до всього тексту пункту.
::placeholder::placeholder стилізує текст-підказку в полях форми.
<input class="search" type="text" placeholder="Введіть запит">.search::placeholder {
color: #7b8794;
font-style: italic;
}Текст placeholder призначений для короткої підказки. Він не замінює повноцінний підпис поля.
Декоративний вміст краще створювати за допомогою псевдоелементів, якщо він не має важливого значення для користувача.
Добре підходять:
декоративні лінії;
фонові фігури;
стрілки;
візуальні позначки;
лапки та інші прикраси.
Не варто приховувати важливу інформацію в ::before або ::after, наприклад:
назву кнопки;
повідомлення про помилку;
основний текст статті;
важливу інформацію про товар.
Псевдоелементи створюються CSS, тому їхній вміст не є повноцінною заміною семантичному HTML.
Наприклад, текст кнопки краще записати в HTML:
<button type="button">Зберегти</button>А іконку або декоративну стрілку можна додати через псевдоелемент:
button::after {
content: " →";
}Декоративний текст через content може бути недоступним або незручним для деяких допоміжних технологій. Тому важливий текст має бути безпосередньо в HTML.
Також не слід використовувати псевдоелемент як єдиний спосіб передати інформацію. Наприклад, повідомлення «Помилка» має бути присутнім у HTML, а колір чи значок можуть лише доповнювати його.
Ці поняття схожі за назвою, але мають різне призначення.
Псевдоклас описує стан або умову для вже наявного елемента:
button:hover {
background-color: darkblue;
}Правило застосовується до кнопки, коли курсор наведено на неї.
Псевдоелемент стилізує частину елемента або створює віртуальну частину:
button::after {
content: " →";
}Правило додає декоративний вміст після тексту кнопки.
contentНеправильно:
.box::before {
width: 20px;
height: 20px;
background-color: red;
}Псевдоелемент може не відобразитися, оскільки для нього не задано content.
Правильно:
.box::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: red;
}Для порожнього псевдоелемента потрібно задати розмір або інші властивості, які роблять його видимим.
.box::after {
content: "";
width: 100%;
height: 4px;
background-color: black;
}Якщо елемент має display: inline, властивості ширини та висоти можуть не працювати очікуваним чином. Для декоративних блоків часто використовують display: block або display: inline-block.
Якщо псевдоелемент має position: absolute, батьківський елемент зазвичай повинен мати:
.parent {
position: relative;
}Інакше псевдоелемент може опинитися не в тому місці.
Не слід додавати через content текст, без якого користувач не зможе зрозуміти сторінку. Основний зміст має бути в HTML.
Псевдоелементи добре підходять для невеликих декоративних деталей. Якщо елемент має власний зміст, складну структуру або взаємодію з користувачем, краще створити його в HTML.
Псевдоелементи — це віртуальні частини HTML-елементів, які стилізуються через CSS.
::before додає вміст перед основним вмістом елемента.
::after додає вміст після нього.
Для ::before і ::after зазвичай потрібно вказувати content.
Порожнє content: "" використовують для декоративних фігур і ліній.
::first-letter стилізує першу літеру, а ::first-line — перший рядок.
::selection змінює вигляд виділеного тексту.
::marker стилізує маркери списку.
::placeholder стилізує текст-підказку в полях форми.
Важливий для користувача текст потрібно зберігати в HTML, а не лише в псевдоелементах.