javascript - CSS: How to remove pseudo elements (after, before,...)? - Stack Overflow

admin管理员组

文章数量:1026989

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.

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.

• javascript
• html
• jquery
• css
• pseudo-element

• possible duplicate of Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) – Blazemonger Commented Feb 3, 2014 at 17:32

9 Answers 9

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

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/

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 (::).

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

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

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.

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

There are two ways:

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

p:after {
  content: none;
}

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

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.

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.

• javascript
• html
• jquery
• css
• pseudo-element

• possible duplicate of Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) – Blazemonger Commented Feb 3, 2014 at 17:32

9 Answers 9

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

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/

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 (::).

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

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

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.

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

There are two ways:

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

p:after {
  content: none;
}

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

本文标签： javascriptCSS How to remove pseudo elements (afterbefore)Stack Overflow