Веб Навсегда.инфоCSS-стили → AFTER

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

AFTER

Описание элемента

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

Используется AFTER вместе с атрибутом CONTENT.

Но AFTER имеет несколько особенностей, связанных с прибавлением к различным типам элементов:

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

Синтаксис

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

Вообще данное свойство может иметь широкое применение, особенное если его использование связать со скриптами. Но не всё так хорошо. Огромнейшим минусом является всеми "любимый" Билл Гейтс, а точнее его детище Internet Explorer, ни одна версия которого не поддерживает псевдоэлемент AFTER.

Примеры использования

Пример использования псевдоэлемента AFTER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоэлемент AFTER</title>
<style type="text/css">
P.new:after
{
 content: "СвежачОК";
 font-size: 14px;
 color: red;
 background-color: Blue;
}
</style>
</head>
<body>
<p class="new">Это вроде как новая запись, которая выводится самая первая и к которой при помощь скриптов можно добавить <i>class="new"</i>. При этом будет выполняться псевдоэлемент <b>AFTER</b>. </p>


<p>А это уже старый параграф, у котого ничего не добавляется и никакой подписи не выводится.</p>
</body>
</html>

И примерно вот так это будет выглядеть:
Пример использования псевдоэлемента AFTER