9.1 Псевдоелементи ::before і ::after
Псевдоелементи ::before і ::after є потужними інструментами в CSS, які дозволяють додавати декоративні елементи перед або після вмісту елементів без зміни HTML. Вони широко використовуються для створення візуальних ефектів, покращення інтерфейсу користувача та додавання стилів до елементів.
Опис:
::before: псевдоелемент, що додається перед вмістом елемента::after: псевдоелемент, що додається після вмісту елемента
Синтаксис:
element::before {
/* стилі для псевдоелемента before */
}
element::after {
/* стилі для псевдоелемента after */
}
Основні властивості
Псевдоелементи ::before і ::after можуть містити практично будь-які CSS-властивості, такі як колір, розмір, позиціонування, фон, тіні тощо. Проте, щоб псевдоелемент був видимим, йому потрібно задати контент і розмір.
content: задає вміст псевдоелемента. Може бути текстом, зображенням або навіть порожнім рядкомdisplay: встановлює тип відображення псевдоелемента. Зазвичай використовуєтьсяblockабоinline-blockposition: керує позиціонуванням псевдоелемента (наприклад,absoluteабоrelative)widthіheight: встановлюють розміри псевдоелемента
9.2 Додавання тексту
За допомогою властивості content можна легко додати текст на початку або в кінці будь-якого елемента.
.example::before {
content: "Початок: ";
color: blue;
}
.example::after {
content: " :Кінець";
color: red;
}
<body>
<p class="example">Це приклад тексту</p>
</body>
Пояснення коду:
.example::before: додає текст "Початок: " перед вмістом елемента і фарбує його в синій колір.example::after: додає текст " :Кінець" після вмісту елемента і фарбує його в червоний колір
9.3 Декоративні лінії
Також можна додати декоративні лінії, що обрамляють вміст:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Текст з декоративними лініями</div>
</body>
Пояснення коду:
.decorative-line::before: створює декоративну лінію перед вмістом елемента.decorative-line::after: створює декоративну лінію після вмісту елемента
9.4 Вставка іконок
Мало тексту? Тоді легко можна вставити кілька іконок:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Текст з іконкою</p>
</body>
Пояснення коду:
.icon::before: додає іконку перед текстом, використовуючи URL зображення
9.5 Складні декоративні елементи
Ну і давайте додамо щось складніше:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Елемент з декоративним кутом</div>
</body>
Пояснення коду:
.complex-decor::before: створює декоративний елемент перед основним вмістом, використовуючи градієнт і абсолютне позиціонування.complex-decor: встановлює відносне позиціонування для батьківського елемента, щоб псевдоелемент міг позиціонуватися відносно нього
9.6 Використання анімацій
Можна навіть додати анімацію:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Пояснення коду:
.animated::before: створює квадратний псевдоелемент і анімує його обертання за допомогою ключових кадрів
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ