1

In Chrome and Opera, it appears that :first-line rules apply to the :after pseudo-element as well, and cannot be overridden with !important or normal CSS weighting.

For example, I have a series of rules on an H2 element like so (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 would expect (and what happens in IE, FF, and Safari) is that the :after pseudo-element would have a font-size of 10px. Instead, it has a font-size of 30px. Is there a way to correct this behavior?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Will
  • 13
  • 2
  • @Zeaklous I don't see the relevance of that, as it isn't an issue of specificity. It works in other browsers as the OP clearly stated. – Josh Crozier Nov 08 '13 at 20:18

1 Answers1

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;
}

The "\A" is the escaped character for a new line. And using white-space: pre forces the dots to be the second line.

fiddle

kalley
  • 18,072
  • 2
  • 39
  • 36
  • In my case the H2 contained a link, and the newline character caused the :after element to overlap its parent. Combining this with http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible did the trick, thanks! – Will Nov 08 '13 at 20:39