Overwrite :after & : before classes content of Bootstrap

Question

I want to overwrite the following CSS

  .navbar:before{
    display: table;
    content: " ";
  }

and remove any content possible in the before or after files. It's creating unnecessary space between my navbar and left panel. I tried giving that class an

content: none !important;

But it was not getting overwritten. Is there any way we can overwrite this? I am on the latest Bootsrap version.

Answer 1

For overriding it this would be enough:

.navbar:before {
    content: none !important;
}

If that doesn't help you can also try :

.navbar:before {
    display: none !important;
}

This would hide the element. But if you don't see the properties being overridden (check that with developer tools inspector) then i would search if those css rules are even added to the page.

Also it's possible that something else is causing the space.

Important would override even inline properties added with style="". Here are some reads about specificity:

https://css-tricks.com/specifics-on-css-specificity/ http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/