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>

Результат

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

CSS
Псевдо-элементы

Поиск…