::first-line 伪元素用于将特殊效果或样式应用于块级元素的第一行。此伪元素对内联元素没有影响。它仅适用于块级元素。
受伪元素 ::first-line 影响的文本范围取决于视区宽度、行长、字体大小、字母间距、单词间距等因素。
只有一小部分 CSS 属性可以与 ::first-line 伪元素一起使用，如下所示：
- Font 相关属性
- Background 相关属性
- Color 属性
- text-decoration
- text-transform
- letter-spacing
- word-spacing
- line-height
- text-shadow
- text-decoration-color
- text-decoration-style
- text-decoration-line
- vertical-align
语法
selector::first-line {
/* ... */
}
CSS ::first-line 示例
下面是一个演示 ::first-line 伪元素的简单用法的示例：
<html>
<head>
<style>
p::first-line {
color: black;
font-size: 2em;
text-decoration-color: rgb(4, 65, 65);
text-decoration-line: line-through;
}
</style>
</head>
<body>
<p>First line is affected by the pseudo-element.<br />
Second line has no effect.
</p>
<span>Even to an inline element there is no effect.</span>
</body>
</html>
