Псевдоэлементы - это специальные селекторы CSS, которые позволяют добавлять дополнительное содержимое или стили к элементам на странице.

Псевдоэлементы начинаются с двоеточия ::, ниже представлен список самых распространённых псевдоэлементов:

• ::after
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::selection
• ::slotted
• ::backdrop Экспериментальная возможность
• ::placeholder Экспериментальная возможность
• ::marker Экспериментальная возможность
• ::spelling-error (en-US) Экспериментальная возможность
• ::grammar-error Экспериментальная возможность

Псевдоэлемент ::before позволяет добавить дополнительное содержимое перед указанным элементом, а псевдоэлемент ::after - после указанного элемента. Эти псевдоэлементы могут использоваться для создания декоративных элементов или добавления содержимого к элементам, не изменяя структуру HTML страницы.

Пример использования псевдоэлементов для создания декоративной линии:

h1::before {
  content: "";
  display: block;
  border-top: 1px solid black;
  margin-bottom: 10px;
}

В этом примере мы используем псевдоэлемент ::before, чтобы добавить черную линию перед заголовком h1. Мы задаем содержимое псевдоэлемента пустым (content: "") и устанавливаем его как отдельный блочный элемент с помощью свойства display: block. Затем мы задаем стиль линии с помощью свойства border-top, и устанавливаем отступ снизу с помощью свойства margin-bottom.

Псевдоэлементы могут быть использованы не только для добавления дополнительного содержимого, но и для изменения стиля элементов на странице. Например, псевдоэлемент ::first-letter позволяет изменить стиль первой буквы элемента, а псевдоэлемент ::selection - стиль текста, выделенного на странице.

Таким образом, псевдоэлементы - это специальные селекторы CSS, которые позволяют добавлять дополнительное содержимое или стили к элементам на странице. Они могут быть использованы для создания декоративных элементов, изменения стиля элементов или добавления содержимого к элементам, не изменяя структуру HTML страницы.

Назад