::first-line 伪元素用于将特殊效果或样式应用到块级元素的第一行。该伪元素对内联元素没有影响。它仅适用于块级元素。
受伪元素 ::first-line 影响的文本范围取决于视口宽度、行长、字体等因素。大小、字母间距、字间距等。
只有一小部分 CSS 属性可以与 ::first-line 伪元素一起使用,如下所示:
font相关属性
background相关属性
color属性
语法
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>第一行受伪元素影响。<br />
第二行没有效果。
</p>
<span>对于内联元素也没有效果。</span>
</body>
</html>