Как переопределить CSS, заданный на псевдоэлементе?

Я знаю, что было задано раньше, но я не вижу чистого способа переопределить этот CSS:

.ui-input-search:after {
    content: "";
    height: 18px;
    left: 0.3125em;
    margin-top: -9px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 18px;
}

Мне нужно оставить ui-input-search в элементе, но я могу добавить свой собственный класс, например:

.ui-input-search-no-pseudo:after {
   content: "";
}

Вопрос:
Есть ли простой способ удалить "псевдо-css" без необходимости переписывать CSS строку за строкой?

Спасибо!

Ответ 1

Насколько я могу судить, нет другого пути, кроме как переопределить все свойства. Стили определены в элементе, они не будут просто исчезать из-за другого селектора, который нацелен на элемент.

Если вы хотите удалить псевдоэлемент со страницы, вы можете сделать content: none.

Ответ 2

Здесь content: ""; вообще не действует, если вы хотите удалить это псевдо, вы должны использовать content:none;, он удалит ранее добавленный псевдо-контент.

Если это не поможет, вы также можете попробовать:

display:none; 
//or 
display:none !important;

здесь работает jsfiddle

https://jsfiddle.net/ganeshswami99/52duu0x8/1/