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：

第一行只在块容器盒中有意义，因此 :: first-line伪元素只对带有a的元素有影响显示块，内联块，表格单元格或表格标题的值。在所有其他情况，::第一行没有效果。

<强> Updated Fiddle

Answer 2

::first-line仅适用于块样式元素。默认情况下，span是内联的，所以整个事情都是＆＃34;一行＆＃34;，就像在，它是一条连续的线，只是一直在继续，并在遇到边界。

您可以将span设置为display: block;以使::first-line正常工作：

http://jsfiddle.net/hwmWv/

#tf1 {
    display: block;
}

Answer 3

此伪元素仅适用于块级元素（当显示设置为块，内联块，表格标题，表格单元格时）。如果在内联元素上设置，则不会发生任何事情，即使该内联元素在其中有换行符。

#tf1 {
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif;
display: block; /* assign display property value*/
}

source

::第一行伪元素（不显示）

3 个答案: