6.1 Властивість content
Псевдоелементи ::before і ::after дозволяють додавати контент до і після вмісту елемента, не змінюючи HTML-код. Вони широко використовуються для декоративних цілей, покращення інтерфейсу користувача і створення більш інтерактивних веб-сторінок.
Що таке псевдоелементи ::before і ::after?
Псевдоелементи ::before і ::after створюють віртуальні елементи, які вставляються відповідно до і після вмісту обраного елемента. Ці псевдоелементи часто використовуються для додавання іконок, декоративних елементів чи інших візуальних ефектів.
Синтаксис before:
селектор::before {
content: "текст або інші значення";
/* стилі */
}
Синтаксис after:
селектор::after {
content: "текст або інші значення";
/* стилі */
}
Властивість content
Ключовою властивістю для псевдоелементів ::before і ::after є content. Це властивість визначає вміст псевдоелемента. Воно може бути рядком тексту, зображенням, або навіть порожнім значенням, якщо потрібен лише візуальний ефект.
Можливі значення властивості content:
- Текст:
"текст" - Зображення:
url("path/to/image.png") - Пусте значення:
"" - Атрибути:
attr(attributeName) - Лічильники:
counter(name)
6.2 Приклади використання ::before і ::after
Додавання декоративних елементів
Приклад 1: Додавання іконки перед текстом
У цьому прикладі псевдоелемент ::before використовується для додавання іконки перед текстом посилання. margin-right додає простір між іконкою і текстом:
/* Додавання іконки перед текстом посилання */
a::before {
content: "🔗";
margin-right: 5px;
}
Приклад 2: Додавання декоративного елемента після абзацу
У цьому прикладі псевдоелемент ::after додає декоративний елемент після абзацу. display: block і text-align: right використовуються для вирівнювання елемента по правому краю:
/* Додавання декоративного елемента після абзацу */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Створення декоративних рамок і фонів
Приклад 3: Декоративна рамка навколо елемента
У цьому прикладі псевдоелемент ::before використовується для створення декоративної смуги над елементом div. position: absolute і top: -10px дозволяють позиціонувати смугу вище елемента:
/* Декоративна рамка навколо елемента */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Приклад 4: Автоматичне додавання лапок
У цьому прикладі псевдоелементи ::before і ::after використовуються для додавання лапок навколо блоку цитати:
/* Автоматичне додавання лапок навколо цитати */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Приклад 5: Нумерація заголовків
У цьому прикладі псевдоелемент ::before використовується для додавання номера перед заголовком h2. counter-increment збільшує значення лічильника, а content: counter(section) вставляє поточне значення лічильника:
/* Нумерація заголовків */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Застосування і стилізація псевдоелементів
Стилізація псевдоелементів
Псевдоелементи можна стилізувати так само, як і будь-які інші елементи. Вони підтримують більшість CSS-властивостей, включаючи колір, фон, межі, розміри і позиціонування.
Використання псевдоелементів для створення складних макетів
Псевдоелементи часто використовуються для створення декоративних елементів у макетах, таких як рамки, тіні і інші візуальні ефекти, без необхідності додавання додаткових HTML-елементів.
Приклад: кожен елемент списку матиме синій маркер перед текстом:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ul>
6.4 Приклад повної реалізації
/* Додавання іконки перед текстом посилання */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Додавання декоративного елемента після абзацу */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Декоративна рамка навколо елемента */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Автоматичне додавання лапок навколо цитати */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Нумерація заголовків */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад псевдоелементів ::before і ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Посилання з іконкою</a>
<p>Абзац із декоративним елементом після тексту</p>
<div class="decorative-box">Елемент із декоративною рамкою</div>
<blockquote>Цитата з автоматичними лапками</blockquote>
<h2>Заголовок із нумерацією</h2>
<h2>Ще один заголовок</h2>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ