How to Override CSS Set on a Pseudo Element

How do I override CSS set on a pseudo element?

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.

How to override a ::after pseudo selector

Basically you have 2 options:

1. Use !important rule.

.header-md:after,
tabbar:after,
.footer-md:after {
 background-image: none !important;
}

2. Override original styles.

.header-md:after,
.tabs-md[tabsPlacement="top"] > tabbar:after,
.footer-md:before,
.tabs-md[tabsPlacement="bottom"] > tabbar:after {
  background-image: none;
}

How do I override CSS set on a pseudo element?

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.

Why can't I override existing pseudo-elements?

Ok, to put this straight, after some reading, this is the specificity:

• Id: 100
• classes: 10
• pseudo-classes: 10
• pseudo-elements: 1
• elements: 1

So that makes the first selector have a specificity of 22, and the 2nd of just 21. Apparently first-child seems to be a pseudo-class and not a pseudo-element.

Finally, adding a td before .other does the trick, since then document order takes precedence.

How can I override Pseudo Classes in CSS3

A more specific rule should help:

div.blue:before, div.blue:after {
  border-color: blue;
}

Reference: MDN - Specificity

---

Related Topics