IGS

IGS
Вернуться к Курс

Базовый курс HTML CSS

0% Завершено
0/25 Шагов
  1. 1) Как создать сайт
  2. 2) Программы, с помощью которых создаются файлы на HTML и CSS
  3. 3) Язык гипертекстовой разметки HTML
  4. 4)Хостинг. Cервер. Доменное имя.
  5. 5) Каскадные таблицы стилей CSS
  6. 6) Списки
  7. 7) Гиперссылка
  8. 8) Структура
  9. 9) Якорь. Селекторы
  10. 10)Практика
  11. 11)Изображение HTML
  12. 12)Изображение CSS
  13. 13) Padding, margin
  14. 14)display. Таблицы
  15. 15) Flexbox CSS
  16. 16) Макет "Paper", Figma, Pixso
  17. 17)Grid Layout
  18. 18) шрифты
  19. 19) Позиционирование.
  20. 20) Псевдоэлемент
  21. 21) Псевдоклассы в CSS.
  22. 22) CSS3-анимация
  23. 23) Адаптивная вёрстка. Mobile First
  24. 24) Форма обратной связи
  25. 25) Препроцессоры в CSS
Базовый курс HTML CSS 20) Псевдоэлемент
В прогрессе
Урок 20 из 25
В прогрессе

20) Псевдоэлемент

  • Псевдоэлемент

  •  before

  •  after

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

 

Псевдоэлементы ::after и ::before

::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для <img>, <input> и ряда других элементов.

В примере 1 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 1. Применение ::after

По своему действию ::before аналогичен ::after, но вставляет псевдоэлемент до содержимого элемента. В примере 2 показано добавление маркеров своего типа к пунктам списка посредством сокрытия стандартных маркеров и применения псевдоэлемента ::before.

Пример 2. Использование ::before

Псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

::selection {
  background: cyan;
}

 

Контейнер