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

Псевдо-класс

::after

::after генерирует контент после содержимого элемента, к которому он добавляется.

Контент вставляемый с помощью псевдо-элемента ::after, добавляется после остального содержимого элемента к которому он применяется и отображается по умолчанию в качестве линейного элемента. Контент задается при помощи свойства content.

Например, предположим что вы хотите добавить небольшую иконку для всех ссылок, которые ссылаются на другие сайты. Как правило это хорошая практика, добавлять иконку, которая говорит читателям, что данная ссылка введет на другой домен. Такая иконка может быть добавлена до или после текста ссылки. Как правило иконку вставляют после ссылки, что мы и собираемся сделать, используя псевдо-элемент ::after, мы хотим вставить небольшую иконку иконку () после текста всех ссылок, которые имеют класс .external.

Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together!

Следующий фрагмент кода добавит иконку в ссылки. Иконка будет вставлена после текста ссылки.

.external::after {
    content: url(external-link.png);
    padding-left: 5px; /* Не большой отступ слева */
}

Изображение будет добавлено с помощью свойства content. Изображения, вставленные с помощью псевдо-элементов не могут быть изменены. Они вставляются как есть, поэтому прежде чем вставить изображение, не забудьте сделать его нужного размера.

Результат:

See the Pen ::after by Siteacademy (@Siteacademy) on CodePen.

Поскольку контент вставляется с использованием псевдо-элемента, он не добавляется в DOM, так как нельзя увидеть и редактировать вставленное содержимое с помощью средства разработки браузера. Тем не менее, в Chrome 32+ и Firebug для Firefox позволяет вам увидеть позицию псевдо-элемента в DOM, выбрав его можно просмотреть стили, связанные с ним в панели CSS. Результат просмотра в инспекторе:

css after

Приведенный выше демонстрационный пример также показывает, что контент добавленный при помощи псевдо-элемента ::after позиционируется линейно.

Так контент, добавленный псевдо-элементом ::after также означает, что псевдо-элемент будет располагаться поверх других элементов, которые находятся непосредственно перед ним в DOM.

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

.element::after {
    content: url(path/to/image.png); /* изображение */
}

.element::after {
    content: "(To be continued...)"; /* строка */
}

.element::after {
    content: "\201C"; /* unicode символ */
}

Контент псевдо-элемента ::after также может быть счетчиком, либо оставлен пустым.
Пустые псевдо-элементы могут быть использованы для очистки плавающих элементов.

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

Псевдо-элементы стилизуются точно также как и простые элементы, но обычно их используют в основном для "косметических" целей. Псевдо-элементы очень часто используются для создания геометрических фигур в CSS. Смотрите демонстрационный пример ниже. Восьмиугольную звезду можно создать с помощью простого элемента и с добавлением к нему псевдо-элемента. Обычный элемент - это простой квадрат. Псевдо-элемент имеет тот же стиль, но с поворотом на 45 градусов, тем самым образуя звезду из восьми углов.

See the Pen Eight-point star ::after by Siteacademy (@Siteacademy) on CodePen.

Данный пример можно создать аналогичным образом, используя псевдо-элемент ::before.

Примечания

Различное условное обозначение: (:) и (::)

Скорее всего, вы столкнетесь (или уже сталкивались) с обозначениями псевдо-элемента :after при котором используют одно двоеточие, либо два.

В CSS1 и CSS2 псевдо-элементы обозначались с одним двоеточиеем (:), так же как и псевдо-классы (например :hover). В CSS3, ввели обозначение с двойными двоеточием (::), для того чтобы бы было легче отличать их от псевдо-классов.

/* старый синтаксис CSS2 */
.element:after {
    // css
}

/* новый синтаксис CSS3 */
.element::after {
    // css
}

Все браузеры которые поддерживают обозначения двойного двоеточия, также поддерживают обозначения одного двоеточия. Internet Explorer 8, не поддерживает обозначения двойного двоеточия. Поэтому если вам не нужно поддерживать IE8, вы можете смело использовать двойное двоеточие по стандарту CSS3.

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

Доступность

Контент добавленный с помощью псевдо-элементов не добавляется в DOM, а отображается только визуально. Кроме того, так как их не существует в DOM, вы не сможете к ним обратиться по средством JavaScript.

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

Примеры

С использованием псевдо-элементов,в том числе ::after разрабатывается огромное количество различных компонентов и эффектов. В дополнение к указанным выше примерам, следующие статьи содержат некоторые примеры использования псевдо-элементов:

Использование ::after для стилизации ссылок при печати документа

Один очень полезный способ использования псевдо-элемента ::after при печати документа. Само собой ссылку невозможно нажать на бумаге, как правило вы должны добавить к ней URL-адрес, для того чтобы читатели могли перейти по ней. Пример ниже демонстрирует данный способ передачи URL:

@media print {
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

Данный фрагмент кода содержит несколько CSS концепций: селектор атрибута (а [href]), свойство content, а также функцию attr().

  • Селектор атрибута будет выбрать все ссылки на страницы, которые имеют атрибут href.
  • ::after сообщает браузеру, выбрать эти ссылки и вставить значение свойства content после текста ссылок.
  • Само свойство content принимает множество значений. Одно из значений является строкой. Строка может быть разбита на несколько частей, каждая часть должна быть обернута в кавычки. Несколько строк будут объединены в одну строку. Подробнее вы можете прочитать на странице content.
  • Функция attr(x) "возвращает в виде строки значение атрибута X для субъекта селектора", в нашем случае это псевдо-элемент ::after.

Таким образом, приведенное выше правило выбирает все ссылки, которые имеют атрибут href (с помощью селектора атрибутов), возвращает значение атрибута ссылки, используя функцию attr(), а затем использует это значение в качестве содержания псевдо-элемента ::after, которое будет вставленно в ссылки после её текста.

Также в примере мы использовали правило @media, которое используется для определения набора стилей для определенного вида медиа запросов (в данном случае печати).

Демонстрационный пример ниже показывает эту концепцию в действии, но без испольования медиа запросов:

See the Pen Add URL in link with CSS by Siteacademy (@Siteacademy) on CodePen.

Живой пример

Следующий пример использует псевдо-элемент ::after для добавления иконки стрелки к пунктам меню, при наведении по которым открывают подменю. Стрелка добавляется внутри свойства content, посредством Unicode символа.

See the Pen CSS Dropdown menu by Siteacademy (@Siteacademy) on CodePen.

При наведении на пункт меню, стрелка направленная вниз, заменяется стрелкой направленной вверх, изменяя значение строки в свойстве content. Это доступно благодаря возможности изменения псевдо-элементов и псевдо-классов, селектор li:hover::after выбирает псевдо-элемент при наведении на пункт меню.

Поддержка браузеров

Псевдо-элемент :after с одним двоеточием, поддерживается в Chrome, Firefox, Safari, Opera, Internet Explorer 8+, Android и iOS.

Псевдо-элемент :after с двойным двоеточием, поддерживается во всех браузерах, но в Internet Explorer только с 9 версией и выше.

Анимированние псевдо-элементов поддерживается в Chrome 26+, Firefox 4+, Safari 6.1+, Opera и Internet Explorer 10+.

Примечание

Internet Explorer не поддерживает использование z-index с псевдо-элементами.

Связанные статьи

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.