CSS-псевдоэлементы позволяют стилизовать элементы или части элементов, не добавляя к ним идентификаторы (#id) или классы (.class). Это будет полезно в ситуациях, когда вы просто хотите стилизовать первую букву абзаца, чтобы создать эффект буквицы, или вы хотите вставить некоторый контент до или после элемента и т. д. только через таблицу стилей.

CSS3 ввел новый синтаксис двойных двоеточий (::) для псевдо-элементов, чтобы различать их и псевдоклассы. Новый синтаксис псевдоэлемента может быть задан с помощью:

selector::pseudo-element { property: value; }

Теперь рассмотрим наиболее часто используемые псевдоэлементы:

Псевдоэлемент ::first-line

Псевдоэлемент ::first-line применяет специальный стиль к первой строке текста.

Правила в следующем примере форматируют первую строку текста в абзаце. Длина первой строки зависит от размера окна браузера или содержащего его элемента.

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

CSS-свойства, которые можно применить к псевдоэлементу ::first-line: font, background, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

Псевдоэлемент ::first-letter

Псевдоэлемент ::first-letter используется для добавления специального стиля к первой букве первой строки текста. Правила в следующем примере форматируют первую букву абзаца текста и создают эффект буквицы.

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

CSS-свойства, которые можно применить к псевдоэлементу ::first-letter: font, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (только если float установлен none), color, margin и padding, border, background.

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after могут быть использованы для вставки сгенерированного контента до или после содержимого элемента. CSS-свойство content используется вместе с этими псевдо-элементами для вставки сгенерированного контента.

Это очень полезно для дальнейшего украшения элемента дополнительным содержимым, которое не должно быть частью фактической разметки страницы. Используя эти псевдоэлементы, вы можете вставлять обычные строки текста или встроенные объекты, такие как изображения и другие ресурсы.

h1::before {
    content: url("images/marker-left.gif");
}
h1::after {
    content: url("images/marker-right.gif");
}

Псевдоэлементы и CSS-классы

Обычно нам нужно стилизовать только определенный абзац текста или другие блочные элементы с этими псевдоэлементами. Вот тут и вступает в игру объявление класса с псевдоэлементом. Псевдоэлементы могут быть объединены с классами CSS для создания нужного эффекта.

Правила в следующем примере будут отображать первую букву всех абзацев с class="article" зеленым цветом и размером xx-large.

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.