CSS :: przed znoszący :: first-letter code

Question

HTML:

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

Moje pytanie brzmi: Dlaczego :: zanim zabija :: zasada first-letter ? Co tu się dzieje? Jeśli :: before zostanie usunięte, :: first-letter działa poprawnie.

Czy istnieje alternatywa do kierowania pierwszej litery w tym przykładzie bez zmiany html?

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

Answer 1

Od the spec:

Po reguły p::before {content: "Note: "} selektor p::first-letter matches the "N" of "Note".

Należy również zauważyć, że nieruchomość display jest nieważny :first-letter i :first-line elementami pseudo. Ponownie, ze specyfikacją:

przyszłych wersjach opisie pozwalają na to Pseudoelement stosować do kilku typów wyświetlaczy.

To jest zamierzone zachowanie.

Obejście:

HTML:

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

i 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

Nie uboju i :: first-letter nie ma wartości wyświetlona deklaracja.

Więcej informacji: http://www.w3schools.com/cssref/sel_firstletter.asp