After

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Ошибки Да Да Да Да Частично Частично Да

 

CSS CSS2, CSS3
Значение по умолчанию нет

Описание

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

Для after характерны следующие особенности.

  1. При добавлении after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
  2. При добавлении after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

Синтаксис

Элемент:after { content: "текст" }

Значения

Нет.

Пример

<!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=windows-1251">
<title>
after</title>
<style
type="text/css">
p.new:after {
content
: "Новьё!"; /* Добавляемый текст */
color: #333; /* Цвет текста */
background-color: #fc0; /* Цвет фона */
font-size: 90%; /* Размер шрифта */
padding: 2px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h2>
Истории</h2>
<p class="new">
История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.</p>
<p>
История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p>
</body>
</html>

В данном примере в конце текстового абзаца, помеченного классом new, выводится определенный текст для привлечения внимания.

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <PRE>.

Браузер Firefox до второй версии включительно нестабильно работает с позиционированными элементами, а также не применяет after к тегу <FIELDSET>.