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

BEFORE

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

↑ ВВЕРХ ↑


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


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