Лучшее руководство по CSS псевдо-элементы в 2024 году. В этом руководстве вы можете изучить грамматика,: Первая линия псевдоэлемент,примеров,: Во-первых букв псевдо-элемент,примеров,Псевдо-элементы и классы CSS,Несколько Псевдоэлементы,примеров,CSS -: перед тем псевдо-элемента,примеров,CSS -: после того, как псевдо-элемента,примеров,Все CSS псевдо-классы / элементы,
CSS псевдо-элемент используется для добавления некоторых специальных эффектов селекторы.
Псевдо-элемент синтаксиса:
Классы CSS можно также использовать псевдо-элементы:
"Первая линия" псевдо-элемент используется для установки специальный стиль к первой строке текста.
В следующем примере, браузер будет основан на "первой линии" псевдо-элемента в стиле первой строки текста элементов р формате:
Примечание: "первой линии" псевдо-элемент может быть использован только для элементов уровня блока.
Примечание: Следующие свойства могут быть применены к "первой линии" псевдо-элемента:
"Первое письмо" псевдо-элемент используется для установки специальный стиль к первой букве текста:
Примечание: "первой буквы" псевдо-элемент может быть использован только для элементов уровня блока.
Примечание: Следующие свойства могут быть применены к "первой букве" псевдо-элемента:
Псевдо-элементы могут быть объединены с классами CSS:
Приведенный выше пример будет делать все класс, как первая буква абзаца статьи становится красным.
Множество псевдо-элементов могут быть объединены в использовании.
В следующем примере, первый абзац письма будет отображаться красным цветом, размер шрифта хх-большой. Первая строка остальной части текста будет синим, а небольшие заглавные буквы.
Остальные пункты текста по размеру шрифта по умолчанию и цвет для отображения:
"Перед" псевдо-элемент может вставить новое содержание в передней части содержимого элемента.
Следующий пример, чтобы вставить изображение в передней части каждого элемента <h1>:
": После того, как" псевдо-элемент может вставить новое содержание после того, как содержимое элемента.
Следующие примеры вставки изображения после каждого элемента <h1>:
| селектор | пример | Пример показывает, |
|---|---|---|
| : ссылка | a:link | Выбрать все непосещенные ссылки |
| : посетил | a:visited | Выделить все посещенные ссылки |
| : активный | a:active | Выбор является активной ссылкой |
| : Hover | a:hover | Поместите курсор на состояние линии связи |
| : фокус | input:focus | После выбора входной элемент имеет фокус |
| : Во- первых букв | p:first-letter | Выберите первую букву каждого элемента <p> |
| : Первая линия | p:first-line | Выберите первую строку каждого элемента <p> |
| : Первый ребенок | p:first-child | <] P> селектор элемента соответствует любому элементу, принадлежащий к первому элементу ребенка |
| : перед тем | p:before | Вставить содержимое перед каждым элементом <p> |
| : после того, как | p:after | Вставить содержимое после каждого <р> элемент |
| : Языки (язык) | p:lang(it) | Выбор атрибута Ланг <р> элемент начального значения |