Почему псевдоэлементы так называются?

Что такое псевдоэлементы и почему их называют «псевдо»?

Псевдоэлементы в CSS — это ключевые слова, которые добавляются к селектору и позволяют стилизовать определённую часть выбранного элемента. Термин «псевдоэлемент» происходит от двух частей: «псевдо» (греч. ψευδής — «ложный») и «элемент». Они называются так, потому что:

1. Не являются реальными HTML-элементами в DOM-дереве. В отличие от обычных элементов (<div>, `<span>``), псевдоэлементы не существуют в исходной разметке — они создаются и управляются исключительно средствами CSS. Это «ложные» элементы, виртуально генерируемые браузером для целей стилизации.

2. Позволяют работать с «виртуальными» частями элемента, которые нельзя выделить отдельным тегом в HTML. Например, первая буква или строка абзаца, маркер списка или содержимое перед/после элемента.

Примеры псевдоэлементов

/* Стилизация первой буквы абзаца */
p::first-letter {
  font-size: 2em;
  color: red;
}

/* Добавление контента перед элементом */
.button::before {
  content: "★ ";
  margin-right: 5px;
}

/* Стилизация маркера списка */
li::marker {
  color: blue;
}

/* Выделение первой строки текста */
.article::first-line {
  font-weight: bold;
}

Ключевые характеристики псевдоэлементов

• Синтаксис: Современный стандарт требует использования двойного двоеточия (::) для отличия от псевдоклассов (которые используют одно двоеточие). Например, ::before, ::after, ::first-line.
• Содержимое: Псевдоэлементы ::before и ::after обязательно требуют свойства content, даже если оно пустое (content: "").
• Позиционирование: Они становятся дочерними элементами относительно выбранного элемента и могут позиционироваться, анимироваться и стилизоваться почти как обычные элементы.

Сравнение с псевдоклассами

Важно отличать псевдоэлементы от псевдоклассов:

• Псевдоклассы (:hover, :nth-child()) описывают состояние элемента
• Псевдоэлементы создают новые виртуальные элементы для стилизации

/* Псевдокласс - состояние наведения */
button:hover {
  background: blue;
}

/* Псевдоэлемент - виртуальный элемент */
button::after {
  content: " →";
}

Практическое применение псевдоэлементов

Псевдоэлементы особенно полезны для:

• Декоративных элементов без добавления лишнего HTML:

.tooltip::before {
  content: "";
  position: absolute;
  border: 10px solid transparent;
  border-bottom-color: black;
  bottom: 100%;
}

• Оформления типографики:

p::first-letter {
  initial-letter: 2;
  font-family: fantasy;
}

• Чистых CSS-иконок и индикаторов:

.checkbox::after {
  content: "✓";
  color: green;
}

• Создания сложных форм и эффектов через комбинацию ::before и ::after.

Ограничения и особенности

• Не все псевдоэлементы поддерживают все свойства CSS. Например, ::first-letter не применяет margin или padding.
• Доступность: Контент, добавленный через content, читается скринридерами, но может создавать проблемы доступности если несёт смысловую нагрузку.
• Производительность: Чрезмерное использование может влиять на производительность отрисовки.

Итог: Псевдоэлементы называются «псевдо», потому что они создают виртуальные, несуществующие в DOM элементы для тонкой стилизации, позволяя сохранять чистую семантическую разметку HTML. Это мощный инструмент CSS, который расширяет возможности оформления без загрязнения структуры документа лишними тегами.