Javascript CSS:如何删除伪元素(之后,之前,...)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3012716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:55:24  来源:igfitidea点击:

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

javascripthtmlcsspseudo-element

提问by Thariama

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

我想使用一个开关来布局网页上的段落标签。

I use the after pseudoelement:

我使用 after 伪元素:

p:after {content: url("../img/paragraph.gif");}

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

现在我需要从页面中删除这个 CSS 代码。

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.

  • 页面上已经使用了jQuery

  • 我不想包含或删除包含 CSS 的文件。

回答by Gilly

p:after {
   content: none;
}

noneis the official value to set the content, if specified, to nothing.

none是将内容(如果指定)设置为的官方值。

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

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

回答by Gabriele Petrioli

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

您需要添加一个 css 规则来删除 after 内容(通过一个类)..



An updatedue to some valid comments.

一个更新由于一些有效的意见。

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

完全删除/禁用:after规则的更正确方法是使用

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

您需要添加一个 css 规则来删除 after 内容(通过一个类)..

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

and add that class to your pwhen you want to with this line

p在您想要使用此行时将该类添加到您的

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

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

一个工作示例:http: //www.jsfiddle.net/G2czw/

回答by Henrik Albrechtsson

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

回答by simhumileco

As mentioned in Gillian's answer, assigning noneto contentsolves the problem:

正如Gillian 的回答中提到的,分配nonecontent解决问题:

p::after {
   content: none;
}

Note that in CSS3, W3Crecommended to use two colons (::) for pseudo-elementslike beforeor after.

请注意,在CSS3 中W3C建议对beforeafter伪元素使用两个冒号 ( ::) 。

From the MDN web doc on pseudo-elements

来自关于伪元素MDN 网络文档

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 ::selectionmust always start with double colons (::).

注意:通常,::应使用双冒号 ( ) 而不是单个冒号 ( :)。这将伪类与伪元素区分开来。然而,由于旧版本的 W3C 规范中不存在这种区别,大多数浏览器为了兼容性而支持这两种语法。请注意,::selection必须始终以双冒号 ( ::)开头。

回答by drewww

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.

这取决于伪选择器实际添加的内容。在您的情况下,将内容设置为""将摆脱它,但如果您要设置边框或背景或其他任何内容,则需要专门将它们清零。据我所知,没有一种万能药可以删除有关 before/after 元素的所有内容,无论它是什么。

回答by SkyRideR

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

几分钟前遇到了同样的问题,只是content:none;没有工作,但添加content:none !important;display:none !important;为我工作

回答by Priyanka Choudhary

p:after {
  content: none;
}

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

这是一种删除 的方法:after,您可以为:before