Можете ли вы предотвратить: стили первой линии от применения к: после элементов в Opera и Chrome?

Question

В Chrome и Opera показано, что: правила первой строки применяются и к: после псевдоэлемента, и не могут быть переопределены важными или нормальными CSS-взвешиванием.

К примеру, у меня есть ряд правил по элементу Н2, как так (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) состоит в том, что: после псевдоэлемента будет иметь размер шрифта 10px. Вместо этого размер шрифта составляет 30 пикселей. Есть ли способ исправить это поведение?

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 заставляет точки быть второй строкой.

fiddle