Псевдоелементи починаються з ::, щоб відрізнити їх від псевдокласів.
Наприклад, його можна використовувати для:
- Стилізації першої літери або рядки елемента
- Вставки вмісту до або після вмісту елемента
Синтаксис псевдо-елементу:
selector::pseudo-element {
property:value;
}
Псевдо-елемент ::first-line
Псевдо-елемент ::first-line використовується для додавання спеціального стилю до першого рядка тексту. У наступному прикладі форматується перший рядок тексту в усіх елементах <p>:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Властивості, які можна застосовувати до псевдо-елементу :: first-line:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Псевдо-елемент :: first-letter
Псевдо-елемент :: first-letter псевдо-елемент використовується для додавання спеціального стилю до першої букві тексту. У наступному прикладі форматується перша буква тексту в усіх елементах <p>:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Властивості, що застосовуються до псевдо-елементу :: first-letter:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (только если "float" установлен "none")
- text-transform
- line-height
- float
- clear
Псевдо-елементи і CSS класи
Псевдоелементи можна комбінувати з класами CSS:
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
Псевдо-елемент - :: before
Псевдо-елемент :: before може використовуватися для вставки деякого вмісту перед вмістом елемента. Для вставки на сторінку спецсимволів можна скорисатися їх CSS-кодами представлених у таблиці
У наступному прикладі вставляється зображення перед вмістом кожного елемента <h1>:
h1::before {
content: url(smiley.gif);
}
CSS псевдо-елемент - :: after
Псевдо-елемент :: after може використовуватися для вставки деякого вмісту після вмісту елемента. У наступному прикладі вставляється зображення після вмісту кожного елемента <h1>:
Псевдоелемент ::selection
Псевдоелемент ::selection дозволяє застосувати стилі до частини документа, виділеного користувачем (наприклад, за допомогою миші).
CSS-властивості які можна застосовувати з псевдоелементом ::selection :
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow
Приклад застосування псевдоелементу ::selection
Рекомендоване відео для перегляду:
Завдання 1
1. Встановити червоний колір тексту для першого рядка елемента <p>.
Завдання 2
Для першої літери елемента <p> встановіть колір тексту на «червоний», а розмір тексту на «xx-large».
Завдання 3
Вставити спецсимвол з таблиці символів до і після елементів <p>, використовуючи псевдоелементи :: before і :: after.
Завдання 4
- Стандартні посилання мають колір чорний.
- При наведенні на посилання колір тексту посилання має відповідати назві (red, green або blue).
- При виділенні тексту посилання - колір заднього фону повинен відповідати його назві.
- Колір першої літери кожного абзацу повинен відповідати певному кольору.
- Якщо виділено текст абзацу, колір заднього фону повинен відповідати кольору першої літери.
- Поки на абзаці утримується кнопка миші, колір тексту повинен відповідати тематиці абзацу (red, green або blue).
- Поки на абзаці утримується кнопка миші, колір першої літери повинен бути чорний.
- Оптимізувати (скоротити) css код, утворюючи групові селектори, що відповідають за той самий колір при тому чи іншому стані елемента, де це можливо