Псевдоэлементы в CSS
Псевдоэлемент - это ключевое слово, которое указывается после селектора, оно позволяет указать стили для определенной части элемента. Псевдоэлементы рекомендовано использовать только в дизайнерских целях. Так как они не добавляются в DOM дерево, напрямую получить доступ к ним через JavaScript невозможно.
Псевдоэлемент можно указать двумя способами, через ‘:’ в CSS2 или ‘::’ в CSS3. Для различия псевдоэлементов и псевдоклассов в третьей версии CSS для псевдоэлементов добавили возможность их указывать через два двоеточия ‘::’. Если не нужна поддержка старых браузеров (в частности IE8) рекомендовано использовать именно вариант CSS3: selector::pseudo-element.
::before - создает псевдоэлемент и добавляет его как первый потомок выбранного элемента.
::after - создает псевдоэлемент и добавляет его как последний потомок выбранного элемента.
::before и ::after обычно используется для добавления стилистических элементов. У обоих должно быть указано свойство: content: "";, в качестве значения можно указать текст или оставить его пустым. Если к элементу нужно добавить несколько псевдоэлементов, то их нужно указывать по одному div::before, div::after { ... }
Примеры: https://codepen.io/Yury_P/pen/GRjrOaq
::first-line - позволяет применить некоторые стили к первой строке блочного элемента: https://codepen.io/Yury_P/pen/OJRWzLp
Разрешенные свойства:
- свойства для шрифтов
- свойства для цвета
- свойства для фона
- word-spacing
- letter-spacing
- text-decoration
- text-transform
- line-height
- vertical-align
::first-letter - позволяет применить некоторые стили к первой букве в первой строке блочного элемента: https://codepen.io/Yury_P/pen/KKgaOgR
Разрешенные свойства:
- свойства для шрифтов
- свойства для цвета
- свойства для фона
- margin
- padding
- border
- float (none)
- word-spacing
- letter-spacing
- text-decoration
- text-transform
- text-shadow
- box-shadow
- line-height
- vertical-align
Следующие псевдоэлементы имеют не очень хорошую поддержку браузеров, будьте аккуратны в их использовании. Поддержку псевдоэлемента можно проверить на сайте https://caniuse.com/
::placeholder - позволяет применить некоторые стили к тексту атрибута placeholder в элементах input и textarea. Список разрешенных свойств такой же, как у псевдоэлемента ::first-linehttps://codepen.io/Yury_P/pen/gOwmYrz
::marker - позволяет применить некоторые стили к маркерам списка или элементам со значением display: list-item; https://codepen.io/Yury_P/pen/dypvbvV
Разрешенные свойства:
- свойства для шрифтов
- animation
- transition
- color
- white-space
- content
- direction
- text-combine-upright
- unicode-bidi
::selection - позволяет применить некоторые стили к элементам, которые были выделены пользователем: https://codepen.io/Yury_P/pen/mdrWbwK
Разрешенные свойства:
- background-color
- color
- caret-color
- cursor
- outline
- text-decoration
- text-shadow
- text-emphasis-color
Это основные псевдоэлементы. Существуют псевдоэлементы, которые не являются официальным стандартом и работают только в определенных браузерах. Целесообразность их применения сомнительна, так как сайт должен выглядеть одинаково во всех браузерах.