1

在 Chrome 和 Opera 中，:first-line 规则似乎也适用于 :after 伪元素，并且不能被 !important 或普通 CSS 权重覆盖。

例如，我对 H2 元素有一系列规则（此处为 jsfiddle）

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。相反，它的字体大小为 30 像素。有没有办法纠正这种行为？

4

1 回答 1

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强制点成为第二行。

小提琴

于 2013-11-08T20:18:59.233 回答