Псевдоелементи CSS

Модуль Псевдоелементів CSS визначає абстрактні елементи, що присутні в дереві документа не безпосередньо. Ці абстрактні елементи, що звуться псевдоелементами, представляють частини дерева візуалізації, що можуть бути вибрані та оформлені. Псевдоелементи використовуються для створення абстракцій щодо дерева документа, котрі виходять за межі тих, що надає дерево документа.

Перед псевдоелементами ставиться подвійна двокрапка (::). Вони додаються до селекторів (наприклад, p::first-line), щоб вибирати та оформлювати такі недоелементи.

Завдяки псевдоелементам можна цілитися на сутності, що не присутні в HTML, та частини вмісту, на котрі інакше не можна цілитись, не додавши додаткову розмітку. Для прикладу – заповнювач елемента <input>. Це абстрактний елемент, що не є окремим вузлом у дереві документа. Його можна вибрати за допомогою псевдоелемента ::placeholder. Інакший приклад: псевдоелемент ::selection дає збіг зі вмістом, що наразі виділений користувачем, даючи змогу оформити збіг, поки користувач взаємодіє зі вмістом та змінює вибране. Подібного до цього, псевдоелемент ::first-line цілить на першу лінію елемента, автоматично оновлюючись, якщо кількість символів у першій лінії змінюється, без потреби окремо звертатися по довжину лінії елемента.

Довідка

Селектори

Інтерфейси

Терміни

Посібники

Псевдоелементи CSS

Алфавітний список псевдоелементів, визначених усіма специфікаціями CSS і WebVTT.

Цеглинки: Псевдокласи та псевдоелементи

Частина розділу Цеглинок CSS щодо селекторів. Ця стаття описує те, чим є псевдоелемент, і те, як він може бути поєднаний з псевдокласами та вживатися для породження вмісту за допомогою псевдоелементів ::before і ::after.

Як створювати круті рамки за допомогою псевдоелементів

Приклад оформлення породженого вмісту за допомогою псевдоелементів ::before і ::after заради візуальних ефектів.

Споріднені концепції

Специфікації

Специфікація
CSS Pseudo-Elements Module Level 4 (CSS Pseudo-Elements 4)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.