Псевдоэлементы на самом деле не работают со встроенными элементами… или работают?
Название звучит как очевидный и общеизвестный факт CSS, но я видел, как опытные разработчики боролись с этой темой, советуя мне создавать наложения на изображения с помощью псевдоэлементов. я был уверен, что псевдоэлементы не работают со встроенными элементами , но потом я поигрался с кодом, и оказалось, что это утверждение не совсем верно. Давайте посмотрим, что происходит.
В ручке выше вы можете видеть, что after добавлен псевдоэлемент img, input а также div. Но это работает только с div элемент. Несмотря на то что after виден в инспекторе для обоих input а также img элемент, он не отображается на экране. Мы не можем его ни увидеть, ни выбрать.
Но что, если мы установим display собственность на block за input а также img элементы?
Псевдоэлемент after Все еще не объявиться. Давайте посмотрим на другие «что, если». Что, если мы добавим after к span element, который по умолчанию является встроенным элементом?
Наконец, after визуализируется псевдоэлемент. Можем ли мы сказать, что не имеет значения, установим ли мы для свойства display значение block или inline? Давайте поиграем с некоторыми другими элементами, чтобы найти ответ. Не стесняйтесь изменять свойство отображения для каждого элемента.
Похоже только на это textarea, br а также select не может обрабатывать псевдоэлементы. Изменение значения свойства отображения не имело значения.
Давайте теперь посмотрим на таблицу и все ее дочерние элементы. Как они собираются рендерить after псевдоэлемент?
after псевдоэлемент был отрендерен для всех элементов в таблице: <table>, <thead>, <tbody>, <tr>, <th>, <td>. Эти элементы имеют различные значения свойства display: table-row, table-cell, table-header и другие.
Теперь мы можем сделать вывод, что свойство display элемента, содержащего псевдоэлемент, не влияет на внешний вид after псевдоэлемент. Важно то, к какому элементу мы добавляем after или же before псевдоэлемент. Будь то after появится или нет, зависит от самого элемента HTML, а не от его свойств CSS. Другими словами, элементы HTML имеют встроенные настройки для отображения псевдоэлементов.
Мы также можем сказать, что все элементы блочного уровня всегда могут иметь псевдоэлементы, но некоторые встроенные или встроенные блочные элементы, такие как <img> или же <textarea>могут не отображать такие псевдоэлементы.
