css下划线长度和文字一样长

<br> <br>
        .underline {<br>
            text-decoration: underline;<br>
            /*下划线和文字一样长*/<br>
            text-decoration-skip-ink: none;<br>
        }<br> 

CSS（层叠样式表）是一种用于描述网页上的呈现方式（样式）的语言，它通过将样式与HTML（超文本标记语言）相分离来提高文档的可读性和结构。在CSS中，下划线是一种用于突出显示文本的常见样式之一。然而，CSS默认的下划线长度并不会和文本一样长，这可能会对排版造成不良影响。幸运的是，CSS提供了一种简单的解决方案，使下划线和文字长度一样。

解决方案就是使用text-decoration-skip-ink属性。这个属性允许我们指定下划线是否应该跨越字形（所谓的“墨水”）的断点。默认情况下，这个属性是启用的，这意味着下划线可能会跨越字体中的“空洞”和“断点”，这会导致下划线长度比文字长度短。

要解决这个问题，我们可以将text-decoration-skip-ink设置为none，表示下划线应该始终与文本的最后一个字形形成完整的长度。这样一来，下划线长度就和文字一样长了。