How do I override CSS set on a pseudo element?

css overriding pseudo-element
frequent picture frequent · Jul 24, 2013 · Viewed 44.2k times · Source

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

Sacha picture Sacha · Jul 24, 2013

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.

Related questions

Override body style for content in an iframe

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframe is of a page that is part of my site. The reason I …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Override and reset CSS style: auto or none don't work

I would like to override following CSS styling defined for all tables: table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } I have specific table with class called 'other'. Finally table decoration should looks like: table.other { font-size: 12px; } so i …

Read More