Как переопределить 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 построчно?

Спасибо!


css overriding pseudo-element
person frequent    schedule 24.07.2013    source источник

Ответы (2)


arrow_upward
123
arrow_downward

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

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

Добавлено из комментариев ниже:

Разница между content: "" и content: none заключается в том, что content: "" создает псевдоэлемент без содержимого (то есть пустой псевдоэлемент), тогда как content: none вообще предотвращает создание псевдоэлемента.

person Sacha    schedule 24.07.2013
comment
content: none было то, что мне было нужно. Идеальный! Спасибо. - person frequent; 24.07.2013
comment
Разница между content: "" и content: none заключается в том, что content: "" создает псевдоэлемент без содержимого (т. е. пустой псевдоэлемент), тогда как content: none вообще предотвращает создание псевдоэлемента. - person BoltClock; 24.07.2013
comment
Комментарий @BoltClock должен быть включен в ответ для объяснения. - person Vibhor Dube; 18.11.2015

arrow_upward
10
arrow_downward

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

content:none;

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

display:none;

если все же это не работает, вы можете попробовать следующее, но я никогда не предлагаю вам использовать !важно

 display:none !important;

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

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

person Ganesh    schedule 19.05.2017
comment
Пожалуйста, не советуйте с важным решением. Каждый новичок копирует это - person vanrado; 13.12.2019
comment
@vanrado, спасибо, я обновил код, добавив примечание, чтобы не использовать !важно - person Ganesh; 13.12.2019