Псевдоэлементы теперь настоящие

17.04.2026 • dom, css

Вступление

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

getComputedStyle

window.getComputedStyle(node, '::before')

Подобная конструкция поддерживается очень давно, и, на мой взгляд, не очень хорошо известна.

Метод позволяет получить стили псевдоэлемента. Если вызвать метод и передать туда отсутствующий псевдоэлемент, то метод вернёт корректный набор стилей, как если бы этот псевдоэлемент был. Если передать несуществующее название псевдоэлемента – вернётся пустой набор стилей (свойства будут, но они будут равны пустой строке).

Полезность… Сомнительная, я бы сказал. Думаю, применение всё же найдётся, но достаточно редкое.

pseudoElement в .animate()

node.animate(keyframes, {
    pseudoElement: '::before'
});

Программные Web Animations не очень широко используются, но практически незаменимы в ряде случаев. Их ещё реже используемая возможность – запуск анимации на псевдоэлементах. Ведь если анимацию можно написать в CSS, почему бы не запустить точно такую же через JS?

Тем самым псевдоэлементы стали ближе к обычным элементам ещё и в плане анимаций.

pseudoElement в событиях

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

node.addEventListener('transitionend', event => {
    event.pseudoElement; // -> '::before'
});

Почему пример с transitionend, а не с банальным кликом? Потому что поле есть в ограниченном наборе событий, и click в этом наборе нет.

Это поле тоже полезно, но мне бы хотелось его именно со всеми событиями. Буквально на днях искал несколько минут причину, по которой клик мимо элемента триггерил события на этом элементе. Дело оказалось как раз в “торчащем” псевдоэлементе, который ловил клики и никак себя не проявлял в событии. Будь это поле во всех событиях – потратил бы немного меньше времени на отладку)

pseudoTarget в событиях

В 147м хроме завезли новое поле в событиях – pseudoTarget. Вроде бы завезли. У меня это поле не получилось увидеть ни в одном из вариантов, что я попробовал.

По задумке, в поле лежит объект с типом CSSPseudoElement и имеет несколько полей:

{
    "type": "::before", // тип псевдоэлемента
    "element": ...,
    "parent": ...
}

element – “родительский” DOM элемент, а parent чаще всего будет совпадать с element, кроме случаев, когда один псевдоэлемент внутри другого.

pseudoTarget не заменяет собой target, не беспокойтесь, ваши сайты не сломаются. В чём отличие от pseudoElement? Как я понял, pseudoElement содержит только строку, а pseudoTarget – объект. Проверим вживую, когда заработает.

Ждём обновлений? Ну или хотя бы статью на MDN.

Element.prototype.pseudo

Ещё один новичок 147й версии Хрома – метод .pseudo(...). Идея следующая:

node.pseudo('::before'); // -> CSSPseudoElement

Ещё один способ получить тот же объект, что и в поле pseudoTarget.

Как и в случае с предыдущим пунктом, этот код у меня тоже не завёлся. Возможно, это конструкция заработает совсем скоро, и статьи у этой фичи на MDN тоже нет.

Итого

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

С точки зрения JS поддержка была сильно ограничена: дело в том, что псевдоэлементов практически не было в DOM API, но такое апи потихоньку появляется. CSSPseudoElement постепенно дополняет привычное дерево элементов, поля в событиях подтягивают обработку. Что дальше? addEventListener для псевдоэлементов?

А ещё дальше? Сможем ли мы создавать псевдоэлементы программного? В чём будет отличие между обычными элементами и псевдоэлементами?

Я думаю, дело всё-таки в CSS. CSS определяет создание псевдоэлементов, их внешний вид. Если нам нужен элемент со своими атрибутами или обработкой событий – то следует использовать обычный элемент. Если же нам хватит небольшого “придатка”, который уточнит внешний вид существующего – возможно, хватит псевдоэлемента.

И я бы предложил никогда не использовать псевдоэлементы для контента. Если у вас есть текст, картинки, видео или что угодно ещё – положите их в полноценные элементы.

Новые апи – в любом случае полезное дополнение. Возможно, потребуется время, чтобы сообщество раскрыло потенциал полностью, а пока что просто будем ждать, когда всё заработает.

Почитать ещё посты