Як видалити псевдоелементи before або after

Спочатку визначимося, коли може знадобитися видалити псевдоелемент зі сторінки, тобто сформулюємо суть проблеми. Зазвичай розробка сайтів супроводжується використанням численних файлів CSS що надходять з різних місць. Наприклад, для сайтів на WordPress, нормальним фактом є використання плагінів, які мають свої аркуші стилів, що впливають на відображення сайту. Щоб перевизначити якісь стилі із плагінів, достатньо перевизначити їх із вашої теми. А як щодо псевдоелементів, якщо потрібно повністю видалити сто сторінки?

Наприклад, є такий CSS

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

або

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

Він додає псевдоелемент до елементів списку для створення кастомних буллетів для списків. Тепер припустимо, що елемент 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; }

На цьому все, бажаю все веб-розробникам, особливо, фрілансерам успішного та безпроблемного створення сайтів.