CSS ::before is nullifying ::first-letter

Question

Html code:

<h1>Example title</h1>

CSS:

h1::first-letter{
    display:none;
}
h1::before{
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png);
}

My question is: Why is ::before is killing ::first-letter rule? What is going on here? If ::before is removed, ::first-letter works fine.

Is there any alternative to target the first-letter in this example without changing html?

http://jsfiddle.net/Borachio/kvaxmhth/

Answer 1

From the spec:

After the rule p::before {content: "Note: "}, the selector p::first-letter matches the "N" of "Note".

Note also that the display property is invalid on :first-letter and :first-line pseudo elements. Again, from the spec:

A future version of this specification may allow this pseudo-element to apply to more display types.

This is the intended behavior.

Workaround:

HTML:

<div><h1>Example title</h1></div>

and CSS:

h1{
    display: inline-block;
}
h1::first-letter{
    font-size: 0px;
}
div::before{
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png);
}

Demo: http://jsfiddle.net/kvaxmhth/3/