Псевдоэлементы — это абстрактные элементы документа.
Псевдоэлементы не ограничены DOM-деревом, поэтому их можно использовать для выбора или стилизации части элемента, которые необязательно отображаются в DOM-дереве. Например, с помощью ::first-line можно выбрать первую строку текста. Неважно, какого она размера — при изменении ширины блока и переносе строки выбор первой строки будет происходить динамически. Начнём с простого. Сколько двоеточий ставить — одно или два? В старой спецификации псевдоэлементы писали с одним (:), а в свежей — c двумя (::). Это даёт возможность визуально отличать псевдоклассы (:) от псевдоэлементов (::), даже не зная самих свойств. Если увидите псевдоэлементы с одним (:), то смело меняйте на (::). А чтобы сохранить совместимость с IE8 и ниже используйте postcss плагин. Можно ли управлять псевдоэлементами с помощью JavaScript? К сожалению, нет. Дело в том, что псевдоэлемент по-настоящему не находятся в DOM. Они всё же создаются в CSS. А то, что вы их видите в DevTools в Elements, это доработка производителей браузеров, чтобы разработчикам было удобнее взаимодействовать с псевдоэлементами. Поэтому все данные, которые вы хотите изменять с помощью JavaScript, помещайте в непосредственно разметку. Важный момент — вы не можете добавить псевдоэлемент к <input>, <img>, <audio>, <video>, <canvas>, <embed>, <iframe>, <object>. Все перечисленные элементы относятся к категории embedded (замещаемых). Замещаемые элементы могут полностью заменить все отображение элемента, в том числе и их псевдоэлементы. Вот почему в замещаемых элементах не работают псевдоэлементы. Например, тег <img> в зависимости от загруженности картинки будет выглядеть абсолютно по-разному. С загруженным изображением он отобразится, а с незагруженным — покажется область с текстом из alt. Подробнее о псевдоэлементах вы можете узнать с помощью главы «Селекторы» в наших тренажёрах: https://tml.io/5q9ha
HTML Academy
Псевдоэлементы — это абстрактные элементы документа.
Псевдоэлементы не ограничены DOM-деревом, поэтому их можно использовать для выбора или стилизации части элемента, которые необязательно отображаются в DOM-дереве. Например, с помощью ::first-line можно выбрать первую строку текста. Неважно, какого она размера — при изменении ширины блока и переносе строки выбор первой строки будет происходить динамически.
Начнём с простого. Сколько двоеточий ставить — одно или два? В старой спецификации псевдоэлементы писали с одним (:), а в свежей — c двумя (::). Это даёт возможность визуально отличать псевдоклассы (:) от псевдоэлементов (::), даже не зная самих свойств.
Если увидите псевдоэлементы с одним (:), то смело меняйте на (::). А чтобы сохранить совместимость с IE8 и ниже используйте postcss плагин.
Можно ли управлять псевдоэлементами с помощью JavaScript? К сожалению, нет. Дело в том, что псевдоэлемент по-настоящему не находятся в DOM. Они всё же создаются в CSS. А то, что вы их видите в DevTools в Elements, это доработка производителей браузеров, чтобы разработчикам было удобнее взаимодействовать с псевдоэлементами. Поэтому все данные, которые вы хотите изменять с помощью JavaScript, помещайте в непосредственно разметку.
Важный момент — вы не можете добавить псевдоэлемент к <input>, <img>, <audio>, <video>, <canvas>, <embed>, <iframe>, <object>. Все перечисленные элементы относятся к категории embedded (замещаемых). Замещаемые элементы могут полностью заменить все отображение элемента, в том числе и их псевдоэлементы. Вот почему в замещаемых элементах не работают псевдоэлементы. Например, тег <img> в зависимости от загруженности картинки будет выглядеть абсолютно по-разному. С загруженным изображением он отобразится, а с незагруженным — покажется область с текстом из alt.
Подробнее о псевдоэлементах вы можете узнать с помощью главы «Селекторы» в наших тренажёрах: https://tml.io/5q9ha