[英]CSS ::before is nullifying ::first-letter
Html code: HTML代码:
<h1>Example title</h1>
CSS: 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 is ::before is killing ::first-letter rule? 我的问题是:为什么:: before杀死:: first-letter规则? What is going on here?
这里发生了什么? If ::before is removed, ::first-letter works fine.
如果删除:: before,则:: first-letter可以正常工作。
Is there any alternative to target the first-letter in this example without changing html? 在此示例中,有没有其他选择可以针对第一个字母而不更改html?
http://jsfiddle.net/Borachio/kvaxmhth/ http://jsfiddle.net/Borachio/kvaxmhth/
After the rule
p::before {content: "Note: "}
, the selectorp::first-letter matches the "N" of "Note"
.在规则
p::before {content: "Note: "}
,选择器p::first-letter matches the "N" of "Note"
。
Note also that the display
property is invalid on :first-letter
and :first-line
pseudo elements. 还要注意,
display
属性在:first-letter
和:first-line
伪元素上无效。 Again, from the spec: 再次,从规范:
A future version of this specification may allow this pseudo-element to apply to more display types.
本规范的未来版本可能允许此伪元素应用于更多显示类型。
This is the intended behavior. 这是预期的行为。
HTML: HTML:
<div><h1>Example title</h1></div>
and CSS: 和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/ 演示: http : //jsfiddle.net/kvaxmhth/3/
It isn't killing, the ::first-letter doesn't have the display declaration. 这不是杀死, :: first-letter没有显示声明。
More information: http://www.w3schools.com/cssref/sel_firstletter.asp 详细信息: http : //www.w3schools.com/cssref/sel_firstletter.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.