How to override a ::after pseudo selector

Question

I have seen a number of posts similar to this, but I haven't found anything that works for me.

I have an Ionic2 application, where I have a style I want to get rid of.

This is what I can see..

and I wish to get rid of the background-image

It would be good to be able to do it using an Id (I only want this on this one element, and not others that may have these classes), but I have also tried the following...

.ion-header.header.header-md:after{
   background-image: none;
  }

I don't know why the following does not work.

Anyone have any suggestions?

Thanks in advance!

You may need to use ::after (CSS3 syntax)? Also, are your styles loaded before or after the main.css? — Just a student
– Just a student, Commented Feb 11, 2017 at 11:03

max · Accepted Answer · 2017-02-11 11:12:04Z

3

Basically you have 2 options:

Use !important rule.

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

Override original styles.

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

answered Feb 11, 2017 at 11:12

max

8,6973 gold badges25 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

peterc Over a year ago

The above worked perfectly. Also, I found as also mentioned ion-header is an element, not a class, so even ion-header.header.header-md::after{ background-image: none; } actually worked.

max Over a year ago

Yes, but I don't recommend this. stackoverflow.com/a/5970136/3258604

Collectives™ on Stack Overflow

How to override a ::after pseudo selector

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related