Как удалить псевдоэлементы before или after

Сначала определимся, когда может понадобиться удалить псевдоэлемент со страницы, то есть сформулируем суть проблемы. Обычно разработка сайтов сопровождается использованием многочисленных файлов CSS приходящих с разных мест. Например, для сайтов на WordPress, нормальным фактом является использование плагинов, которые имеют свои листы стилей, влияющие на отображение сайта. Чтобы переопределить какие-то стили из плагинов, достаточно переопределить их из вашей темы. А как насчет псевдоэлементов, если нужно полностью удалить их сто страницы?

Например, есть такой CSS

li::before { content: url("bullet.png"); }

или

li::before { content: "•"; }

он добавляет псевдоэлемент before к элементам списка для создания кастомных буллетов для списков. Теперь предположим, что элемент li на какой-то странице сайта используется для создания каких-то контейнеров и буллеты, а именно псевдоэлементы, мешают и их нужно удалить.

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

Можно просто использовать display: none; в таком случае псевдоэлемент не будет показываться, но, при этом, дальше будет присутствовать на странице. Это можно проверить, например, с помощью инструментов вебмастера в браузере.

Чтобы удалить псевдоэлементы before или after из структуры документа нужно вспомнить возможные значения для свойства content, они могут быть следующие: normal, inherit, none, counter, url, attr, string, open-quote, close-quote, no-open-quote, no-close-quote, initial. Среди них есть свойство none, оно нам и нужно.

Итак, чтобы удалить псевдоэлемент нужно переопределить свойство content и задать ему значение none, а именно:

li::before { content: none; }

Возможно придется воспользоваться !important чтобы усилить важность селектора и перебить изначальное значение.

К сожалению, это единственный способ. Влиять напрямую на псевдоэлементы с помощью JavaScript или какой-нибудь библиотеки, например, jQuery, нельзя, так как псевдоэлементы не являются частью DOM.

Подводя итоги, чтобы удалить псевдоэлемент со страницы нужно задать свойству content значение none, возможно с !important, например, вот так:

li::before { content: none !important; }

На этом все, желаю все веб разработчикам, особенно, фрилансерам успешного и беспроблемного создания сайтов.