在 Chrome 和 Opera 中,似乎 :first-line 规则也适用于 :after 伪元素,并且不能被 !important 或正常的 CSS 权重覆盖。
例如,我有一系列关于 H2 元素的规则,如下所示 ( jsfiddle here )
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 伪元素的字体大小为 10px。相反,它的字体大小为 30px。有没有办法纠正这种行为?
最佳答案
我想出了一个办法:
h2.dotted:before {
content: "\A............................................";
font-size: 10px !important;
position: absolute;
bottom:-1em;
left: 0;
width: 100%;
white-space: pre;
}
“\A”是新行的转义字符。并使用 white-space: pre
强制将点放在第二行。
关于css - 你能阻止:first-line styles from applying to :after elements in Opera and Chrome?吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19867655/