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 になることです。代わりに、フォントサイズは 30px です。この動作を修正する方法はありますか?

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すると、ドットが強制的に 2 行目に表示されます。

フィドル

于 2013-11-08T20:18:59.233 に答える