Вы здесь: Главная » CSS » Псевдоэлементы. Что такое ::before и ::after

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

Во многих статьях по HTML или CSS вы наверняка неоднократно сталкивались с понятием элемента - это любой тег HTML, который имеет внутреннее содержимое - как правило, текст или картинку. Т.е. это абзац (<p>), любой из заголовков (<h1> ... <h6>), блочная цитата (<blockquote>), раздел, статья или div (<section>, <article>, <div>)  и т.п. Что тогда такое псевдоэлемент?

Что такое псевдоэлемент?

Псевдоэлемент - это некий контент, которым можно управлять с помощью CSS. Причем управление касается либо какой-то части элемента (первой буквы или строки), выделения текста или несуществующего в html-разметке контента.

Добавлять псевдоэлементы нужно к существующим элементам, в основном к селекторам тегов, классов или id. Поэтому в коде css-файла псевдоэлементы записываются сразу после основного селектора с одним или двумя двоеточиями перед своим названием:

Например:

Обратите внимание, что в некоторых случаях перед наименованием псевдоэлемента стоит одно двоеточие, а в других - 2 двоеточия. И тот, и другой вариант вполне допустимы, т.к. синтаксис CSS2 позволяет писать их с одним двоеточием, а синтаксис CSS3 - с двумя. Второе двоеточие в CSS3 было введено  для того, чтобы отличать псевдоклассы (:hover, :active, :focus и т.д.) от псевдоэлементов. Поскольку браузеры понимают оба синтаксиса, неважно, в сущности, одно или два двоеточия вы поставите перед псевдоэлементами. Главное, чтобы вы не делали пробел ни ДО, ни После двоеточия(-ий), т.к. это приведет к ошибке. Исключение составляет псевдоэлемент ::selection, который всегда указывается с двумя двоеточиями.

Описание псевдоэлементов

Псевдоэлемент ::selection

Псевдоэлемент ::selection необходим для изменения стиля выделенного пользователем текста. Вы можете  использовать для него такие стилевые следующие свойства, как color,  background и background-color.

Firefox использует нестандартный псевдоэлемент ::-moz-selection.

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

Псевдоэлемент ::first-line позволяет определить стиль первой строки текста блочных или блочно-строчных элементов, а также заголовков и ячеек таблиц.

Причем стили будут относиться именно к форматированию всей первой строки, какой бы длинной или короткой она ни была. Длина строки в основном зависит от семейства шрифта и его размера, размера окна браузера или ширины родительского блока. В стилевых правилах можно использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Если необходимо добавить отступ к первой строке, то делать это нужно для родительского элемента с помощью css-свойства text-indent:

Посмотреть пример:

See the Pen Pseudo-elements by Elen (@ambassador) on CodePen.18892

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

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

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

Это псевдоэлементы с генерируемым контентом, т.е. в них можно задать некое содержимое, которого в html-разметке НЕ существует, но которое отобразится при использовании css-свойств для псевдоэлементов :before и :after. Эти псевдоэлементы не только управляют цветом, фоном или шрифтом своего содержимого, а и создают это содержимое, т.к. имеют обязательное свойство content:

Без свойства content эти элементы вообще не появятся на экране, какие бы стилевые правила вы им не задавали. Само свойство подразумевает использование, как правило, какого-то текста - слова, словосочетания, одного символа или знака, в том числе в формате Unicode. Также можно назначить для этого свойства пустые кавычки, если никакое текстовое содержимое вы не хотите выводить на экран. Например, нужно сгенерировать точку перед элементом меню:

Посмотреть на примере:

See the Pen Horizontal Menu with ::before by Elen (@ambassador) on CodePen.18892

Такого же типа меню, но не с точками перед каждым пунктом, а с треугольниками после текста можно создать, используя псевдоэлемент ::after:

Пример "вживую":

See the Pen Horizontal Menu with ::after by Elen (@ambassador) on CodePen.dark

Использование различных значений для свойства content в ::before и ::after

Свойство content в псевдоэлементах ::before и ::after может иметь различные значения -  не только текст или пустые кавычки. Например, можно задать кавычки разных видов с помощью свойства content: open-quote (открывающие) или content: close-quote (закрывающие). Сделать это можно для блочных цитат таким образом:

Также с помощью этих псевдоэлементов можно отключить кавычки, которые добавляются для такого элемента, как q (цитата), используя свойство content со значениями no-open-quote и no-close-quote. Правда, пользоваться им, скорей всего, вы будете крайне редко.

Посмотрите, как это будет выглядеть:

See the Pen Pseudo-elements ::before and ::after for quotes by Elen (@ambassador) on CodePen.dark

Использование функции attr() ::before и ::after

В примере ниже псевдоэлементы ::before и ::after используются для создания всплывающих подсказок над ссылками.
В отличие от других вариантов значений для свойства content здесь используется функция attr(), в скобках которой можно указать любой атрибут (title, src, id, class и т.д.), а также любой из data-атрибутов, которые вы можете придумать сами.

Тут использован код, в котором для псевдоэлемента :before в качестве значения для свойства content назначен атрибут title, указанный для элемента ссылки <a>:

Вот что получилось:

See the Pen Pseudo-elements ::before and ::after for tooltips by Elen (@ambassador) on CodePen.dark

Аналогом использования атрибута title может быть любой data-атрибут. Прелесть таких атрибутов заключается в том, что у них нет ограничений по количеству и по названиям - вы можете придумать что-то свой, например, data-age="18", data-user="Иванов Геннадий", data-user-id="167894", data-pic="images/pic1.png" и т.д.
Второй пример использует атрибут data-text для кнопки:

И форматирование псевдоэлемента :before подразумевает, что сначала мы "прячем" этот элемент слева от кнопки, используя для button свойство overflow: hidden, а для :beforetransform: translate(-120%), а при наведении показываем текст data-атрибута:

Очень часто для таких hover-эффектов могут использоваться css-свойства группы transform, особенно translate(), поэтому иметь о них представление нужно обязательно.

Ссылки на статьи на английском:

  1. Свойство content
  2. CSS Tricks Презентация

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *