CSS :: before无效:: first-letter

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

我的问题是:为什么::之前是杀人::第一封信规则？这里发生了什么？如果:: before被删除,:: first-letter工作正常.

是否有任何替代方法可以在不更改html的情况下定位此示例中的第一个字母？

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

Answer 1

从规格:

规则之后p::before {content: "Note: "},选择器 p::first-letter matches the "N" of "Note".

另请注意,display属性:first-letter和:first-line伪元素无效.再次,从规范:

此规范的未来版本可允许此伪元素应用于更多显示类型.

这是预期的行为.

解决方法:

HTML:

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

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

演示:http://jsfiddle.net/kvaxmhth/3/