Контент.

Псевдоэлементы after и before предназначены для " врезки" в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (: before) или после (: after) какого либо элемента с помощью свойства content, которое собственно и определяет содержимое для вставки.

Всё вместе пишется так:

p: after {content: " Конец, а кто слушал молодец!! "; }

Теперь после каждого параграфа будет добавляться надпись: " Конец, а кто слушал молодец!! "

Значением свойства content может быть:

· " текст" - собственно любой текст или символы.

· " \0410" - юникод.

· url(путь) - адрес какого либо объекта.

· open-quote - открывающая кавычка.

· close-quote - закрывающая кавычка.

· no-open-quote - отменяет открывающую кавычку.

· no-close-quote - отменяет закрывающую кавычку.

· inherit - наследует значение элемента родителя.

· none - ничего не добавляется.

· normal - для псевдоэлементов before и after тоже самое, что и none.

· counter - показывает значение счетчика, заданного свойством counter-reset.

· attr(атрибут тега) - показывает текст, который является значением атрибута того или иного тега указанного в скобках.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " https://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлементы after и before< /title>
< style type=" text/css" >
*: before {color: #00f; font-variant: small-caps; }
*: after {color: #f00; font-variant: small-caps; }
body: before {content: " начало документа"; }
body: after {content: " конец документа"; }
p: before {content: " анекдот: "; }
p: after { content: ": -)"; font-size: x-large; }
ul {list-style-type: none; }
li: before { content: " № "; color: #0f0; }
h4: before{content: url(graphics/marker.gif); }
q: before { content: open-quote; font-size: 30px; }
q: after { content: close-quote; font-size: 30px; }
img: after {content: attr(src); }
< /style>
< /head>
< body>
< hr>
< h4> Заголовок с сердечком.< /h4>
< h4> Параграфы с добавлением слова " анекдот: " вначале и смайлика в конце: < /h4>
< p> Если бы при приеме на работу...< /p>
< p> Однажды молодой сисадмин...< /p>
< h4> После рисунка добавляется значение его атрибута: " src" - путь к рисунку: < /h4>
< img src=" graphics/fon.jpg" >
< h4> Цитата в кавычках: < /h4>
< q> Лёд тронулся, господа присяжные заседатели! < /q>
< h4> Список с нестандартными маркерами: < /h4>
< ul>
< li> Первый
< li> Второй
< li> Третий
< /ul>
< hr>
< /body>
< /html>

Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:

Звездочка перед псевдоэлементом *: псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными " маркерами" в списке из примера.

В качестве добавляемого контента может вступать какой либо объект, в примере мы добавили рисунок ко всем заголовкам, однако если браузер не сможет обработать тот или иной файл, то ничего не добавится.

Спецсимволы HTML (например, спецсимвол: & para;), будут отображаться простым текстом (& para; а не ¶) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.

Псевдоэлементы after и before, как и свойство content не поддерживаются браузерами Internet Explorer 7 и ниже.

Псевдоэлемент:: selection.

Псевдоэлемент :: selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.

Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент :: -moz-selection который официально не входит в спецификацию CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " https://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлемент:: selection< /title>
< style type=" text/css" >
p :: selection {
color: #f00;
background: #0f0;
}
< /style>
< /head>
< body>
< p> Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент:: selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.< /p>
< /body>
< /html>

К данному псевдоэлементу можно применить только следующие CSS свойства: color, background и background-color.

Полезные советы:

· В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями :: first-letter,:: first-line,:: after,:: before, и новый :: selection - таким вот способом разработчики решили отделить пседоэлементы от псевдоклассов. Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например: first-letter и :: first-letter это формально два разных псевдоэлемента.

· В правилах стиля для псевдоэлементов допустимо использовать только свойства, относящиеся к шрифту, тексту и его фону.