Ответ
Псевдоэлементы (::before, ::after и др.) создаются CSS-движком и добавляются в виртуальное DOM-дерево, но не являются частью реального DOM. Они существуют только в области отображения (рендеринга) и не доступны через стандартные DOM-методы, такие как querySelector, если не указан их тип.
Пример:
.element::before {
content: "→";
color: red;
}Хотя псевдоэлемент визуально присутствует, в DOM его нет. Однако, можно получить его стили через getComputedStyle().
Особенности:
- Нельзя выбрать через JS без указания типа (
::before) - Не участвуют в DOM-событиях
- Не влияют на структуру DOM-дерева
- Содержимое (
content) доступно только для чтения через CSSOM
Ответ 18+ 🔞
А, слушай, вот эта вся хуйня с псевдоэлементами ::before и ::after — это вообще отдельный цирк, ёпта! Представь: CSS-движок, как какой-нибудь волшебник-хуёвник, на лету создаёт эти штуки и суёт их в виртуальное дерево для отрисовки. Но в реальный-то DOM, в эту нашу священную структуру, он их нихуя не добавляет! Они как призраки, блядь — вроде есть, а потрогать нельзя.
Вот смотри, пишешь ты в стилях:
.element::before {
content: "→";
color: red;
}И в браузере эта красная стрелочка торчит, все её видят. А ты возьми и попробуй её через document.querySelector поймать — нихуя! Пустота! Она же в DOM-дереве не живёт, она только в рендере болтается, хитрая жопа.
Но есть же нюансы, ёбана!
- Выбрать её наскоком не выйдет. Только если явно указать, что ты ловишь именно
::before, но и то — не везде и не всегда. - События на них не вешаются. Кликнул по такому псевдоблочку — а в ответ тишина, он же не в DOM-событиях участвует, мудак бестелесный.
- Дерево DOM они не ломают. Никаких неожиданных детей у твоего элемента не появится, всё чисто.
- А вот прочитать, что у него в
contentнаписано — можно, блядь! ЧерезgetComputedStyle()подкрадешься и вытащишь. Но только прочитать, ёпта, изменить — ни хуя. Только для чтения, через CSSOM.
Вот такие пироги с псевдокотятами. Выглядят как часть страницы, а на деле — просто рисованная хуйня на холсте браузера.