CSS :: before wird zunichte gemacht :: 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); 
} 

Meine Frage ist: Warum :: before ist tötet :: first-letter-Regel ? Was geht hier vor sich? Wenn :: before entfernt wird, funktioniert :: first-letter gut.

Gibt es eine Alternative, um den ersten Buchstaben in diesem Beispiel anzusteuern, ohne html zu ändern?

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

Answer 1

Von the spec:

Nach der Regel p::before {content: "Note: "} der Wähler p::first-letter matches the "N" of "Note".

Beachten Sie auch, dass die display Eigenschaft ist ungültig auf :first-letter und :first-line Pseudo-Elemente. Wiederum aus der Spezifikation:

Eine zukünftige Version dieser Spezifikation kann dieses Pseudo-Element für weitere Anzeigetypen gelten lassen.

Dies ist das beabsichtigte Verhalten.

Umgehung:

HTML:

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

und 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

Es tötet nicht, die :: first-letter hat nicht die Anzeige Erklärung.

Weitere Informationen: http://www.w3schools.com/cssref/sel_firstletter.asp