Undo pseudo element ::before and ::after rules

Question

Possible Duplicate:
Is there any way to reset :after/:before CSS rules for an element?

Is there a neat way to undo all ::before and ::after pseudo element rules on an element? I want to remove the arrow effect on a dropdown menu which is using Twitter bootstrap styles. Do I have to unset each rule one by one or can it be cleared any other way? E.g

.navbar .nav > li > .dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}

How about setting display: none; or display: none!important;? — Jost, Sep 06 '12 at 22:10
You should be able to just set `content:none;` and there won't be anything for CSS to style. — Shmiddty, Sep 06 '12 at 22:11

score 43 · Accepted Answer · answered Sep 06 '12 at 22:13

43

http://jsfiddle.net/LQTmF/

<selector>:after{
    content:none;
}

answered Sep 06 '12 at 22:13

Shmiddty

13,847
1
35
52

Ah, that works. I thought none would be the equivalent to "", which it was already set to, but no :) Thanks – bsod99 Sep 06 '12 at 22:20
2

`none` is the CSS equivalent of `NULL`. An empty string is still a string, is it not? ;) – Shmiddty Sep 06 '12 at 22:23
This is very true, i should know better :( *hangs head* – bsod99 Sep 06 '12 at 22:32

Undo pseudo element ::before and ::after rules

1 Answers1