Урок 17 из 26
В прогрессе

17) Вёрстка блок About. Псевдоэлемент

  • Вёрстка блока About

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

  •  before

  •  after

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

 

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

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

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

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

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

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

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

::selection {
  background: cyan;
}

 

Контейнер

 


Задание

Обязательно:

Вёрстка блока About