Псевдоелементи дозволяють задати стиль логічних елементів, які не визначені у дереві елементів документа, а також генерувати вміст, якого немає у вихідному коді тексту. Наприклад, об'єктна модель документа не пропонує зручного механізму для доступу до першого символу тексту, тому псевдоелементи дозволяють змінити стиль недоступного іншим чином елемента.
Синтаксис псевдоелемента наступний:
Селектор:псевдоелемент {Опис правил стилю}
Кожен псевдоелемент може застосовуватися тільки до одного селектора. Якщо потрібно встановити відразу декілька псевдоелементів для одного селектора, правила стилю повинні додаватися до них окремо:
.foo:first-letter {color:red}
.foo:first-line {font-style:italic}
Псевдоелементи можуть застосовуватися до таблиці зв'язаних або глобальних стилів, але не до внутрішніх стилів.
Наступна таблиця містить список псевдоелементів:
| Псевдоелемент
| Опис
|
| after
| Застосовується для вставки призначеного контенту після елемента. Цей псевдоелемент працює спільно з властивістю стилю content, яка визначає текст для вставки:
<style type="text/css"> P.new:after {content: "- Кінець абзацу";} </style>
<body> <p class="new">Використання псевдоелемента after.</p> </body>
У даному прикладі до вмісту абзацу з класом new додається додаткова фраза, яка є значенням параметра content.
|
| before
| За своєю дією before аналогічний псевдоелементу after, але вставляє контент перед елементом.
|
| first-letter
| Визначає стиль першого символу в тексті елемента, до якого додається.
|
| first - line
| Визначає стиль першого рядка блокового тексту. Довжина цього рядка залежить від багатьох факторів, таких як використовуваний шрифт, розмір вікна браузера, ширина блоку, мови і т.д.
|
Зауваження
Псевдоелементи after і before, а також стильова властивість content не підтримуються браузером Internet Explorer.
