css下划线位置怎么控制

CSS下划线位置怎么控制？
CSS（层叠样式表）是一种用于网页设计的语言，它可以美化HTML（超文本标记语言）元素。CSS下划线是一种给文字添加线条的方式，它可以使文字更有重点和可读性。在本文中，我们将学习如何控制CSS下划线位置。
通过text-decoration属性添加下划线
CSS的text-decoration属性用于给文本添加文字装饰，其中下划线就是一种比较常用的装饰方式。通过以下代码，我们可以为一个段落添加下划线。
pre { font-size: 16px; }
p { text-decoration: underline; }
上述代码将为文档中所有的段落添加下划线。但是，如果你想改变下划线的位置，怎么办呢？接下来我们将介绍一些方法。
通过text-underline-position属性改变下划线位置
text-underline-position是CSS3的一个属性，它用于控制下划线的位置。text-underline-position有两个取值：auto和下划线的偏移量。
当text-underline-position的值为auto时，下划线会显示在文字下面，并与基线对齐。如果值设置为其他数字，下划线将显示在文字下方，并基于偏移量相对于基线。
下面的代码演示如何改变下划线的位置：
pre { font-size: 16px; }
p { text-underline-position: under; text-decoration: underline; }
通过上述代码，我们设置了text-underline-position属性的值为under，这一属性值将会将下划线放在文本下方。这和默认样式相比有一段距离。你可以改变值来达到你想要的下划线位置。
总结
本文中，我们学习了如何使用CSS控制下划线的位置，主要有两种方式：通过text-decoration属性添加下划线；通过text-underline-position属性改变下划线位置。希望本文可以为你提供帮助。