Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:after

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

По умолчанию все вставляемое с помощью :after содержимое является аналогом элемента уровня строки (inline). Если говорить проще, то это практически то же самое, что и добавление в конце элемента чего-либо заключенного в тег <SPAN> с тем лишь отличием, что этот тег мы можем указывать не во всех HTML-элементах, а вот :after можно применить к любому. И, естественно, если необходимо, чтобы добавленная информация стала блоком — нужно просто использовать свойство display.

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

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

Назначение: псевдоэлементы.

Применяется: ко всем элементам.

Значения

У псевдоэлемента :after нет значений.

Синтаксис

селектор:after { content: значение }
селектор:after { content: "текст" }

Пример CSS: использование :after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдоэлемент :after</title>
  <style type="text/css">
   .via:after {
    content: "«ВИА Новости»"; /* добавляемый текст */
    color:#ffffff; /* цвет текста */
    background:#339900; /* цвет фона */
   }
  </style>
 </head>
 <body>
  <p class="via">В лесах Сибири обнаружена новая порода медведей -
   Медведи-шалуны. Медведи-шалуны никогда не ложатся в спячку и круглый
   год веселятся и гуляют. Свое потомство медведи-шалуны сами не растят,
   а подбрасывают для выкорма другим медведям или владельцам зоопарков.</p>
 </body>
</html>

Результат примера

Результат. Использование псевдоэлемента CSS :after.

Использование псевдоэлемента CSS :after

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа