html - CSS::before 是 nullifying::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 规则？这里发生了什么？如果::before 被删除，::first-letter 工作正常。

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

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

Answer 1

来自 the spec :

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

另请注意，display 属性在 :first-letter 和 :first-line 伪元素上无效。同样，根据规范:

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

这是预期的行为。

解决方法:

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/