Псевдоелементи дозволяють задати стиль елементів не визначених у дереві елементів документа, а також генерувати вміст, якого немає у вихідному коді тексту.
Синтаксис використання псевдоелементів наступний.
Селектор: Псевдоелемент {Опис правил стилю}
Спочатку варто ім'я селектора, потім пишеться двокрапка, після якого йде ім'я псевдоелемента. Кожен псевдоелемент може застосовуватися тільки до одного селектору, якщо потрібно встановити відразу декілька псевдоелементів для одного селектора, правила стилю повинні додаватися до них окремо, як показано нижче.
. Foo: first-letter {color: red} .foo: first-line {font-style: italic}
Псевдоелементи не можуть застосовуватися до внутрішніх стилям, тільки до таблиці пов'язаних або глобальних стилів.
Далі перераховані всі псевдоелементи, їх опис та властивості.
: after
Застосовується для вставки призначеного контенту після вмісту елемента. Цей псевдоелемент працює спільно зі стильовим властивістю content, яке визначає вміст для вставки. У прикладі 16.1 показано використання псевдоелемента : after для додавання тексту в кінець абзацу.
Приклад 16.1. Застосування: after
HTML5 CSS 2.1 IE 7 IE 8 + Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоелементи </title>
<style>
P.new:after {content:" - новье! &Quot ;; /* Додаємо після тексту абзацу */ } </style>
</head>
<body>
<p class="new">
Ловля лева в пустелі за допомогою методу золотого перетину. </p>
<p>
Метод лову лева простим перебором. </p>
</body>
</html>
Результат прикладу показаний на рис. 16.1.
В даному прикладі до вмісту абзацу з класом new додається додаткове слово, яке виступає значенням властивості content .
Псевдоелементи : after і : before, а також стильова властивість content не підтримуються браузером Internet Explorer до сьомої версії включно.
: before
За своєю дією : before аналогічний псевдоелементу : after, але вставляє контент до вмісту елементу. У прикладі 16.2 показано додавання маркерів свого типу до елементів списку за допомогою приховування стандартних маркерів і застосування псевдоелемента : before .
Приклад 16.2. Використання: before
HTML5 CSS 2.1 IE 7 IE 8 + Cr Op Sa Fx 4
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоелементи </title>
<style>
UL {padding-left: 0; /* Прибираємо відступ зліва */ list-style-type: none; /* Ховаємо маркери */ } LI: before {content:" \20aa " ;; /* Додаємо перед елементом списку символ в юникоде */ } </style>
</head>
<body>
<ul>
<li>
Чебурашка </li>
<li>
Крокодил Гена </li>
<li>
Шапокляк </li>
<li>
Щур Лариса </li>
</ul>
</body>
</html>
Результат прикладу показаний нижче (рис. 16.2).
В даному прикладі псевдоелемент : before встановлюється для селектора LI, що визначає елементи списку. Додавання бажаних символів відбувається шляхом завдання значення властивості content . Зверніть увагу, що в якості аргументу не обов'язково виступає текст, можуть застосовуватися також символи Unicode.
І : after і : before дають результат тільки для тих елементів, у які містять дані, тому додавання до селектора img або input нічого не виведе.
: first-letter
Визначає стиль першого символу в тексті елемента, до якого додається. Це дозволяє створювати в тексті буквицу і виступаючий ініціал.
Буквиця являє собою збільшену першу літеру, базова лінія якої нижче на одну або кілька рядків базової лінії основного тексту. Виступаючий ініціал — збільшена прописна буква, базова лінія якої збігається з базовою лінією основного тексту.
Розглянемо приклад створення виступаючого ініціал. Для цього потрібно додати до селектора P псевдоелемент : first-letter і встановити бажаний стиль ініціал. Зокрема, збільшити розмір тексту і поміняти колір тексту (приклад 16.3).
Приклад 16.3. Використання: first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоелементи </title>
<style>
P {font-family: Arial, Helvetica, sans-serif; /* Гарнітура шрифту основного тексту */ font-size: 90%; /* Розмір шрифту */ color: black; /* Чорний колір тексту */ } P: first-letter {font-family: 'Times New Roman', Times, serif; /* Гарнітура шрифту першої літери */ font-size: 200%; /* Розмір шрифту першого символу */ color: red; /* Червоний колір тексту */ } </style>
</head>
<body>
<p>
Промінь ліхтарика висвітив старі скрипучі східці, по яких не далі як п'ять хвилин тому в будинок піднявся Паша. Оля обережно прочинила двері і посвітила всередину будинку. Промінь світла, немов знехотя, пробивався крізь тугу завісу з мороку і пилу. </p>
<p>
Погляд Олі опустився на підлогу, і вона скрикнула. У порожньому приміщенні нікого не було, і лише на підлозі валялася порвана туфля Паші. </p>
</body>
</html>
Результат прикладу показаний нижче (рис. 16.3).
В даному прикладі змінюється шрифт, розмір і колір першої літери кожного абзацу тексту.
: first-line
Визначає стиль першого рядка блокового тексту. Довжина цього рядка залежить від багатьох факторів, таких як використовуваний шрифт, розмір вікна браузера, ширина блоку, мови і т.д.
До псевдоелементу : first-line можуть застосовуватися не всі стильові властивості. Допустимо використовувати властивості, що відносяться до шрифту, зміни колір тексту і фону, а також: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align і word-spacing .
У прикладі 16.4 показано використання псевдоелемента : first -line стосовно абзацу тексту.
Приклад 16.4. Виділення першого рядка тексту
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Псевдоелементи </title>
<style>
P: first-line {color: red; /* Червоний колір тексту */ font-style: italic; /* Курсив */ } </style>
</head>
<body>
<p>
Цікаво, а чи існує спосіб дійсно практичного застосування властивості first-line? Ні, не такого, щоб можна було б показати, що це можливо, а щоб воістину захопило дух від краси рішення, загорілися очі від прихованих перспектив, після чого залишається тільки сказати собі, що ось це ось, це саме зробити по-іншому, також витончено і ефектно просто неможливо. </p>
</body>
</html>
Результат прикладу показаний на рис. 16.4.
В даному прикладі перший рядок виділяється червоним кольором і курсивним шрифтом. Зверніть увагу, що при зміні ширини вікна браузера, стиль першого рядка залишається постійним, незалежно від числа входять до неї слів.
Питання для перевірки
1. Який псевдоелемент дозволяє додати текст в початок пропозиції?
- : after
- : before
- : first-line
- : first-text
- : first-letter
2. Що робить наступний стиль?
OL LI: first-letter { color: red; }
- Змінює колір першої літери елемента маркованого списку.
- Змінює колір першої літери елемента нумерованого списку.
- Змінює колір першого рядка в маркірованих списках.
- Змінює колір першої рядки в нумерованому списку.
- Змінює колір тексту всього списку.
3. Який селектор написаний з помилкою?
- p.new:before
- abbr: first-line
- p.new.back: after
- div: before: first-letter
- a: hover: before
Відповіді
1. : Before
2. Змінює колір першої літери елемента нумерованого списку.
3. div: before: first-letter