jquery -::第一行伪元素(不出现)

Question

我有以下代码:

   <div id="slide1">            
   <span id="tf1">BUILDING WEBSITES<br>BLABLABLABLA</span>
   </div>  

和这个 CSS:

#tf1 {
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif;
}
#tf1::first-line {
color: #FFFFFF; 
text-shadow: #000 1px 1px 1px; 
font-size: 60px; 
font-family: Arial, Helvetica, sans-serif;
}
#slide1 {
position: absolute; 
padding: 20px; 
width: 700px;
}

我觉得一切都很好；除了::first-line 没有出现并且所有内容都按照我的 CSS 代码中 #tf1 部分中的编码出现。

关于什么压倒一切的任何想法？或者我的代码中是否存在错误？

Answer 1

你需要添加:

#tf1 {
    display: block;
}

由于 span 具有默认的 display: inline 样式并且来自 docs 关于 ::first-line:

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Updated Fiddle