CSS 使用CSS仅给文本的最后一行添加下划线

在本文中，我们将介绍如何使用CSS仅为文本的最后一行添加下划线。这是一种在网页设计中经常遇到的挑战，但可以通过一些CSS技巧来解决。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在某些情况下，我们可能希望只对文本的最后一行添加下划线，而不是整个文本块。例如，在长文本段落中，我们可能希望强调最后一行，使其与其他行有所不同。

解决方案

要解决这个问题，我们可以使用CSS的伪元素和CSS计数器来实现。

首先，我们需要使用伪元素 ::after 或 ::before 来表示要为最后一行添加下划线的元素。然后，我们可以使用 content 属性将一个空字符串赋值给伪元素，并将其设置为行内块元素（inline-block）。接下来，我们可以使用 height 属性设置伪元素的高度为文本行的高度。最后，我们可以使用 background 属性为伪元素添加下划线样式。

下面是一个示例：

p::after {
  content: '';
  display: inline-block;
  height: 1.2em;
  background: linear-gradient(to right, transparent 70%, #000 70%);
}

在这个示例中，我们使用了 p 元素作为要添加下划线的文本块。我们将 ::after 伪元素应用于 p 元素，并设置了伪元素的 content 为空字符串，display 为行内块元素，height 为文本行的高度（这里假设每行的高度为1.2em），以及 background 为线性渐变样式。

通过使用这个CSS规则，我们可以仅为 p 元素的最后一行添加一个看起来像下划线的背景。

示例

下面是一个在长文本段落中仅对最后一行添加下划线的示例：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae pretium lectus. Sed vehicula, orci quis ultricies fermentum, elit metus ullamcorper tortor, vel varius lectus magna eu mi.</p>
<p>Nulla facilisis diam purus, vitae pellentesque libero tincidunt ut. Proin a quam nec ante rutrum ultrices ac ac mauris. Curabitur nec dignissim dui.</p>
<p>Proin id rhoncus lectus, eu congue metus. Nullam tincidunt metus nec nunc consectetur viverra. Sed non aliquam nulla. Suspendisse bibendum in elit nec posuere.</p>

对于上面的示例，我们应用了之前的CSS规则，仅为每个 p 元素的最后一行添加了下划线。