有没有办法（稳健地）为新创建的元素重置任何可能的 :after 和 :before CSS 规则？
通常你可以直接在元素上设置你想要重置的样式规则（如果你想确定的话，用!important），但我不知道有什么方法可以改变:after中定义的规则仅元素。
（如果可能，只需要使用 Chrome。）
jsFiddle 的示例。
使用:before/:after规则添加的内容正在影响clientHeight返回的值。
【问题讨论】：
标签： javascript css google-chrome
为此有一个DOM2 API。正确的做法是
document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';
不幸的是，没有浏览器实现它。 （Webkit returns null，Firefox has no such method）。看起来 CSS3 甚至不再费心谈论这个了，可能是因为用例非常少。
所以你必须按照above 或other thread 中的建议做一些 id/className 魔术
【讨论】：
getOverrideStyle：21 年前打开，过去 3 年不活动（如果不计算降低错误优先级的自动机器人，至少 7 年）。
我只是为没有 :before / :after 内容的新元素分配一个类名。
【讨论】：
elem.beforeStyle 会很棒。 ;-)
啊，好吧。你可以编写新的 CSS 来重置有问题的 :before/:after 伪元素：
function resetPsuedo(el) {
if (!el.id) el.id = makeId();
var selector = "#" + el.id;
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style'),
rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }");
style.type = 'text/css';
if(style.styleSheet)
style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);
}
function makeId() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (var i=0; i < 15; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
为您传入的元素（如果没有）分配一个随机 ID 允许您修改内联样式 - 而不是访问 el.beforeStyle，您可以使用 CSS 选择器：el#rkhjr828t9g:before。
您可能需要添加更多规则才能完全重置样式。 jsFiddle: view me!
http://www.w3.org/TR/CSS21/generate.html#before-after-content
:before 和 :after 伪元素与其他框交互 如果它们是插入到它们关联的内部的真实元素 元素。
例如，以下文档片段和样式表：
<p> Text </p> p:before { display: block; content: 'Some'; }...将以与以下文档完全相同的方式呈现 片段和样式表：
<p><span>Some</span> Text </p> span { display: block }同样，以下文档片段和样式表：
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }...将以与以下文档完全相同的方式呈现 片段和样式表：
<h2> Header <span>Thing</span></h2> h2 { display: block; } span { display: block; }
【讨论】：
spans。查看修改。
使用ruleSelector("ref::before")[0].style 而不是document.getOverrideStyle(ref, ':before')。
http://jsfiddle.net/s3fv8e5v/4/
<!DOCTYPE html>
<title>CSS</title>
<style>
body {
font: 200%/1.45 charter;
}
ref::before {
content: '\00A7';
letter-spacing: .1em;
}
</style>
<article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>
<script>
function ruleSelector(selector) {
function uni(selector) {
return selector.replace(/::/g, ':') // for Firefox
}
return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
return Array.prototype.slice.call(x.cssRules);
})), function(x) {
return uni(x.selectorText) === uni(selector);
});
}
var toggle = false,
pseudo = ruleSelector("ref::before").slice(-1);
document.querySelector("article").onclick = function() {
pseudo.forEach(function(rule) {
if (toggle = !toggle)
rule.style.color = "red";
else
rule.style.color = "black";
});
}
</script>
【讨论】：