Поиск…


Вступление

Псевдоэлементы, как и псевдоклассы, добавляются к селекторам 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