如何突出显示段落的第一行

在本指南中，您将了解如何突出显示段落的第一行文本，即使您不知道该行有多长。

设置文本的第一行样式

您希望使段落的第一行更大且加粗。在第一行周围包裹一个<span>意味着您可以根据需要对其进行样式设置，如果由于视口尺寸较小导致第一行变短，则样式化的文本将换行到下一行。

一个伪元素可以代替<span>；但是，它更灵活——伪元素选择的精确内容在浏览器呈现内容后计算一次，因此即使视口尺寸发生变化，它也能正常工作。

在这种情况下，我们需要使用::first-line伪元素。它选择每个段落的第一行格式化文本，这意味着您可以根据需要对其进行样式设置。

注意：所有伪元素都以这种方式工作。它们的行为就像您已将元素插入文档中一样，但它们是根据内容在运行时显示的方式动态执行的。

在上面的示例中，伪元素选择每个段落的第一行。要仅选择第一个段落的第一行，您可以将其与另一个选择器结合使用。在这种情况下，我们使用:first-child伪类。这允许我们选择.wrapper的第一个子元素的第一行，如果该第一个子元素是段落。

注意：在复杂或组合选择器中将伪元素与其他选择器组合时，伪元素必须出现在其所在的出现的所有其他组件之后。