IGS Internet

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

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

0% Завершено
0/26 Шагов
  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)display. Таблицы
  11. 11) Flexbox CSS
  12. 12) Padding, margin
  13. 13)Grid Layout
  14. 14) Практика
  15. 15) Вёрстка шапки, шрифты
  16. 16) Позиционирование. Вёрстка блока Smoothie
  17. 17) Вёрстка блок About. Псевдоэлемент
  18. 18) Псевдоклассы в CSS.Вёрстка блока fruits.
  19. 19) Вёрстка блок team, calc, псевдоэлементы
  20. 20) Вёрстка блока footer
  21. 21) CSS3-анимация
  22. 22) Адаптивная вёрстка. Mobile First
  23. 23) Препроцессоры в CSS
  24. 24) Форма обратной связи + Гео-карты на сайте
  25. 25)День домашних работ
  26. 24) Гео-карты на сайте
Базовый курс HTML CSS 17) Вёрстка блок About. Псевдоэлемент
В прогрессе
Урок 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