CSS
Псевдо-элементы
Поиск…
Вступление
Псевдоэлементы, как и псевдоклассы, добавляются к селекторам CSS, но вместо описания специального состояния они позволяют вам определять область и стиль определенных частей элемента html.
Например, псевдо-элемент :: first-letter нацелен только на первую букву элемента блока, заданного селектором.
Синтаксис
- selector :: pseudo-element {свойство: значение}
параметры
Псевдо-элемент | Описание |
---|---|
::after | Вставить содержимое после содержимого элемента |
::before | Вставлять содержимое перед содержимым элемента |
::first-letter | Выбирает первую букву каждого элемента |
::first-line | Выбирает первую строку каждого элемента |
::selection | Соответствует части элемента, выбранного пользователем. |
::backdrop | Используется для создания фона, который скрывает базовый документ для элемента в стеке верхнего уровня |
::placeholder | Позволяет вам стиль текста заполнителя элемента формы (экспериментальный) |
::marker | Для применения атрибутов списка в данном элементе (Experimental) |
::spelling-error | Представляет текстовый сегмент, который браузер помечен как неправильно написанный (Experimental) |
::grammar-error | Представляет текстовый сегмент, который браузер помечен как грамматически некорректный (экспериментальный) |
замечания
Иногда вы видите двойные двоеточия (
::
:) вместо одного (:
. Это способ отделить псевдо-классы от псевдо-элементов, но некоторые старые браузеры , такие как Internet Explorer 8 поддерживает только одного двоеточие (:
) для псевдо-элементов.В селекторе можно использовать только один псевдоэлемент. Он должен появиться после простых селекторов в инструкции.
Псевдоэлементы не являются частью DOM, поэтому не могут быть нацелены на
:hover
или другие пользовательские события.
Псевдо-элементы
Псевдоэлементы добавляются в селекторы, но вместо описания специального состояния они позволяют вам стилизовать определенные части документа.
Атрибут content
необходим для рендеринга псевдоэлементов; однако атрибут может иметь пустое значение (например, content: ""
).
div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
}
Псевдоэлементы в списках
Псевдоэлементы часто используются для изменения внешнего вида списков (в основном для неупорядоченных списков, ul
).
Первый шаг - удалить пули по умолчанию:
ul {
list-style-type: none;
}
Затем вы добавляете пользовательский стиль. В этом примере мы создадим градиентные поля для пуль.
li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}
HTML
<ul>
<li>Test I</li>
<li>Test II</li>
</ul>
Результат