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.gif");}

Now I need to remove this CSS code from the page.

How can this be done easily?

I want to add that:

jQuery is already used on the page
and I do not want to include or remove files containing CSS.

possible duplicate of [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) — Blazemonger, Feb 03 '14 at 17:32

score 600 · Accepted Answer · edited Jan 18 '18 at 11:52

600

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

edited Jan 18 '18 at 11:52

Thariama

50,002
13
138
166

answered Sep 11 '13 at 08:20

Gilly

9,212
5
33
36

2

Does this actually clear out other content-related styles, thus even if you have paddings and margins set they become inert? – Ryan Williams Jul 25 '14 at 13:25
This should be the accepted answer. Using content: ''; could lead to unexpected results when trying to override a previously set content attribute. – Roy Milder Oct 18 '14 at 09:09
2

Can't you just do `display: none`? – Maxwell175 Jul 05 '16 at 13:59
4

@MDTech.us_MAN yes you can do "display:none", but it will still be retained in the DOM tree. Setting content:none doesn't even put it in the DOM tree (you can check it via Chrome's DOM inspector) – kumarharsh Sep 20 '17 at 14:54

score 36 · Answer 2 · edited May 23 '17 at 12:34

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/

Henrik Albrechtsson · Answer 3 · 2013-11-20T18:10:13.887

17

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

edited Nov 20 '13 at 18:10

answered Nov 20 '13 at 17:50

Henrik Albrechtsson

1,707
2
17
17

simhumileco · Answer 4 · 2020-06-28T21:45:05.810

As mentioned in Gillian's answer, assigning none to content solves the problem:

p::after {
   content: none;
}

Note that in CSS3, W3C recommended to use two colons (::) for pseudo-elements like ::before or ::after.

From the MDN web doc on Pseudo-elements:

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons (::).

score 7 · Answer 5 · edited Sep 13 '20 at 01:25

7

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

edited Sep 13 '20 at 01:25

ib.

27,830
11
80
100

answered Sep 12 '20 at 21:03

Kenedy Cruz

71
1
1

score 6 · Answer 6 · answered May 22 '13 at 21:20

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.

score 1 · Answer 7 · edited Sep 05 '19 at 13:47

1

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

edited Sep 05 '19 at 13:47

barbsan

3,418
11
21
28

answered Sep 05 '19 at 13:21

SkyRideR

11
2

score 1 · Answer 8 · answered Mar 26 '23 at 16:19

1

There are two ways:

.content::after {
        visibility: hidden;
        // Or 
        content: none;
    }

answered Mar 26 '23 at 16:19

Akbar Ahmadjonov

11
2

score -4 · Answer 9 · edited Jan 18 '18 at 14:00

-4

p:after {
  content: none;
}

This is a way to remove the :after and you can do the same for :before

edited Jan 18 '18 at 14:00

Tha'er AlAjlouni ثائر العجلوني

14,069
7
33
38

answered Jan 18 '18 at 11:56

Priyanka Choudhary

37
1

4

This answer seems to reiterate the same solution as the currently accepted one from several years ago. If you feel you have something to add, please leave it as a comment on the original answer. Alternatively if you have a different solution, please explain why it's different (and possibly better). – MTCoster Jan 18 '18 at 12:27

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

9 Answers9

Linked