HTML 伪元素 ::first-line 可以选中元素的第一行，并应用样式，通常用于添加特殊效果，如首行缩进等。下面是一个使用 ::first-line 的示例 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>::first-line Demo</title>
<style>
.text::first-line {
font-weight: bold;
text-transform: uppercase;
}
.text {
font-size: 16px;
line-height: 1.5;
text-align: justify;
}
</style>
</head>
<body>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper, quam sed sagittis vulputate, massa enim aliquam enim, vel malesuada metus lorem eu ipsum. Phasellus faucibus sem sit amet sapien aliquet euismod. Duis faucibus purus sed metus vulputate, quis pulvinar nibh tincidunt. Etiam blandit, libero sed ultricies congue, ex elit consectetur nunc, vitae convallis mi sapien sit amet orci. Nam faucibus ipsum ut metus malesuada efficitur. Sed euismod vel eros ac mattis. Ut ut varius lectus. Donec vitae nisl in velit vestibulum tristique. In hac habitasse platea dictumst. Nulla pharetra dui a dictum bibendum.</p>
</body>
</html>上述示例中，我们定义了一个类名为 text 的段落元素，并使用 ::first-line 伪元素选中了它的第一行，并为这个字母设置了特殊样式。我们为 ::first-line 伪元素设置了 font-weight 为 bold，text-transform 为 uppercase，这会使第一行文字变成加粗的大写字母。我们同时为 text 元素设置了 font-size、line-height 和 text-align 用于设置整个段落的样式。
运行上述示例，我们将会看到一个包含一段文字的段落，其中第一行文字被选中，并且字母变得更大、加粗、变成大写。这是因为我们使用了 ::first-line 伪元素，选中了段落的第一行，并为它设置了特殊样式。
正文完