How do I override CSS set on a pseudo element?

Question

I know that has been asked before, but I find no clean way of overriding this CSS:

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

I need to leave ui-input-search on the element, but can add my own class, like:

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

Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?

Thanks!

Answer 1

As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.

If you only want to remove the pseudo element from the page you can do content: none.

Added from comments below:

The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.

Answer 2

Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.

content:none; 

If that doesn't help you can also try :

display:none;  

if still, it doesn't work then you could try the below, but I never suggest you use !important

 display:none !important; 

here is working jsfiddle

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