CSS: How to remove pseudo elements (after, before,…)?

Question

I would like to use a switch for the layout of paragraph tags on a webpage.

I use the after pseudoelement:

p:after {content: url(\"../img/paragraph.g         


        

Answer 1

p:after {
   content: none;
}

none is the official value to set the content, if specified, to nothing.

http://www.w3schools.com/cssref/pr_gen_content.asp

Answer 2

had a same problem few minutes ago and just content:none; did not do work but adding content:none !important; and display:none !important; worked for me

Answer 3

You need to add a css rule that removes the after content (through a class)..

---

An update due to some valid comments.

The more correct way to completely remove/disable the :after rule is to use

p.no-after:after{content:none;}

as Gillian Lo Wong answered.

---

Original answer

You need to add a css rule that removes the after content (through a class)..

p.no-after:after{content:"";}

and add that class to your p when you want to with this line

$('p').addClass('no-after'); // replace the p selector with what you need...

a working example at : http://www.jsfiddle.net/G2czw/

Answer 4

This depends on what's actually being added by the pseudoselectors. In your situation, setting content to "" will get rid of it, but if you're setting borders or backgrounds or whatever, you need to zero those out specifically. As far as I know, there's no one cure-all for removing everything about a before/after element regardless of what it is.

Answer 5

$('p:after').css('display','none');

Answer 6

*::after {
   content: none !important;
}
*::before {
   content: none !important;
}