你能阻止:第一线样式申请到:后元素在Opera和Chrome？

Question

在Chrome和Opera中，似乎:第一线规则也适用于伪元素之后，并且不能用！重要或普通的CSS加权来覆盖。

例如，我有一系列关于H2元素的规则，如so (小提琴手)

CSS

h2.dotted {
    position: relative;
    font-size: 20px;
}
h2.dotted.first:first-line {
    font-size: 30px;
}
h2.dotted:after {
    content: "............................................";
    font-size: 10px !important;
    position: absolute;
    bottom:-1em;
    left: 0;    
    width: 100%;
}

HTML

<h2 class="dotted first">This header has a first-line pseudo-element<br /> 
And its :first-line rules override its :after rules.</h2>
<h2 class="dotted">This header has no first-line pseudo-element<br /> 
And its dots are at the correct size.</h2>

我所期望的(以及在IE、FF和Safari中发生的事情)是:after伪元素的字体大小为10 of。相反，它的字体大小为30 of。有办法纠正这种行为吗？

Answer 1

我想出了一个办法：

h2.dotted:before {
    content: "\A............................................";
    font-size: 10px !important;
    position: absolute;
    bottom:-1em;
    left: 0;    
    width: 100%;
    white-space: pre;
}

“A”是新行的转义字符。使用white-space: pre会迫使点成为第二行。

小提琴