CSS :: before cancels :: 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 :: used to kill :: first letter rule? What's going on here? If: before is removed, :: first-letter works fine.

Is there an alternative to targeting the first letter in this example without changing the html?

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

Answer 1

From spec :

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

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

A future version of this specification may allow this pseudo-element to be applied to other 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/

Answer 2

It does not kill, :: first-letter does not have a display declaration.

Additional information: http://www.w3schools.com/cssref/sel_firstletter.asp