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: создает квадратный псевдоэлемент и анимирует его вращение с помощью ключевых кадров
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ