Can you prevent: first-line styles from applying to: after elements in Opera and Chrome?

Question

Chrome and Opera show that: first-line rules apply to: after a pseudo-element, and cannot be overridden by important or normal CSS weighting.

For example, I have a series of rules for an H2 element like this ( 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> 

What I expect (and what happens in IE, FF and Safari) is that: after the pseudo-element it will have a font size of 10 pixels. Instead, the font size is 30 pixels. Is there any way to fix this behavior?

Answer 1

I figured out a way:

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

"\ A" is the escaped character for the newline. And using white-space: pre causes the dots to be the second line.

fiddle