12. Псевдоэлементы ::before, ::after, ::marker

CSS: Псевдоэлементы ::before, ::after, ::marker

Иллюстрация к уроку Псевдоэлементы позволяют стилизовать определенные части элемента, которые не существуют в HTML-структуре. Сегодня мы рассмотрим три полезных псевдоэлемента: ::before, ::after и ::marker.

Что такое псевдоэлементы?

Псевдоэлементы позволяют добавлять контент или стилизировать определенные части элемента без необходимости добавления дополнительных HTML-элементов. Они как бы “вставляют” контент до или после элемента, либо стилизуют определенные его части (например, маркеры списка).

::before и ::after

Псевдоэлементы ::before и ::after создают псевдоэлементы, которые становятся первым и последним дочерним элементом выбранного элемента соответственно. Ключевое свойство, которое необходимо использовать с этими псевдоэлементами - content.

Пример:

<div class="box">Текст</div>

.box {
  position: relative; /* Важно для позиционирования псевдоэлементов */
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

.box::before {
  content: "До: "; /* Обязательное свойство */
  position: absolute;
  top: 0;
  left: 0;
  background-color: lightgreen;
}

.box::after {
  content: " После"; /* Обязательное свойство */
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: lightcoral;
}

В этом примере мы добавили текст “До: ” перед текстом внутри div с классом box и ” После” после текста. Обратите внимание на свойство content, которое определяет, что будет отображаться в псевдоэлементе. Также важно установить position: relative для родительского элемента, чтобы псевдоэлементы можно было позиционировать абсолютно.

::marker

Псевдоэлемент ::marker позволяет стилизовать маркеры элементов списка (<ol>, <ul>).

Пример:

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

ul {
  list-style-type: square; /* Задаем тип маркера для совместимости */
}

li::marker {
  color: red;
  font-size: 1.5em;
}

В этом примере мы изменили цвет и размер маркеров в списке. Обратите внимание, что не все CSS-свойства применимы к ::marker. Обычно это свойства, связанные с текстом (цвет, шрифт, размер) и некоторые свойства фона.

Жизненный пример

Многие современные сайты и фреймворки используют ::before и ::after для добавления декоративных элементов, таких как стрелки, тени, иконки, без добавления лишних HTML-элементов. Например, часто можно встретить использование ::before и ::after для создания стилизованных кнопок или элементов навигации.

Фреймворки, такие как Bootstrap и Materialize, активно используют псевдоэлементы для добавления декоративных элементов и эффектов к своим компонентам, обеспечивая более чистый HTML-код. Например, стрелки выпадающих меню или индикаторы загрузки часто реализуются с использованием ::before и ::after.

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

Ключевые моменты

::before и ::after требуют обязательного свойства content.
Для позиционирования ::before и ::after часто требуется установить position: relative для родительского элемента.
::marker позволяет стилизовать маркеры списков.
Псевдоэлементы помогают поддерживать чистоту HTML-кода, перенося стилизацию в CSS.
Не все CSS-свойства работают с каждым псевдоэлементом.