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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ