text-decoration属性结合border-bottom或background-image（对于更复杂或自定义的下划线）来实现。但text-decoration本身不直接支持设置下划线的具体宽度。，，推荐的做法是使用border-bottom属性，它允许你指定下划线的宽度、样式和颜色。span标签内的文字可以这样设置：style="border-bottom: 5px solid black;"。这样，就可以精准地在文字下方添加5px宽的下划线了。这种方法简单且灵活，适用于大多数需要自定义下划线样式的场景。在网页设计中，我们经常需要对文字进行样式上的调整，以满足设计需求或提升用户体验，给文字添加下划线是一种常见的做法，但有时候默认的下划线样式可能无法满足我们的设计需求，比如我们想要将下划线与文字之间保持一定的距离，比如5px，HTML本身并不直接支持设置下划线与文字之间的具体距离，但我们可以借助CSS（层叠样式表）来实现这一效果。
（图片来源网络，侵删）方法一：使用border-bottom属性
最直接且常用的方法是通过CSS的border-bottom属性来模拟下划线效果，这种方法不仅可以控制下划线的颜色、粗细，还能通过margin或padding属性间接调整下划线与文字之间的距离，不过，需要注意的是，margin对行内元素（如）的上下方向是不起作用的，因此我们需要使用padding或line-height来调整。
.underline-5px {
display: inline-block; /* 转换为行内块级元素，以便应用padding */
padding-bottom: 5px; /* 文字与下划线之间的空间 */
border-bottom: 1px solid black; /* 下划线样式 */
line-height: 1; /* 调整行高，避免padding影响整体高度 */
}
这是一段普通的文字，而这段文字下方有5px的下划线。
在这个例子中，.underline-5px类通过padding-bottom为文字与下划线之间创建了5px的空间，并通过border-bottom设置了1px的黑色下划线。display: inline-block;使得元素可以接受padding和margin属性，而line-height: 1;则用于防止padding影响行高，使得整体布局更加紧凑。
方法二：使用text-decoration和text-decoration-style（高级浏览器支持）
虽然text-decoration属性本身不直接支持设置下划线与文字之间的距离，但现代浏览器支持text-decoration-style、text-decoration-color、text-decoration-thickness等更细粒度的控制，直接设置下划线与文字间距的功能并不在这些属性中，不过，随着CSS的发展，未来可能会有更多高级属性来实现这一需求。
常见问题解答
（图片来源网络，侵删）Q1: 如果我需要在不同浏览器中都实现这一效果，应该怎么做？
（图片来源网络，侵删）A: 由于border-bottom方法具有良好的兼容性，几乎在所有浏览器中都能正常工作，因此推荐使用这种方法来实现文字下方5px的下划线效果，确保你的CSS代码在标签内的标签中，或者在一个外部CSS文件中，并通过标签引入到你的HTML文件中。
Q2: 如果我想让下划线的颜色与文字颜色不同，应该怎么做？
（图片来源网络，侵删）A: 你可以通过border-bottom-color属性来设置下划线的颜色，使其与文字颜色不同，如果文字是蓝色的，而下划线你想设置为红色，可以这样做：
.underline-custom-color {
border-bottom: 1px solid red; /* 红色下划线 */
color: blue; /* 蓝色文字 */
}Q3: 有没有办法让下划线在文字下方动态调整位置，比如根据文字大小变化？
（图片来源网络，侵删）A: 使用border-bottom方法时，下划线的位置是相对于元素底部固定的，不会随着文字大小的变化而动态调整，如果你需要这种效果，可能需要考虑使用背景图、伪元素（如::after）或其他更复杂的CSS技巧来实现，不过，对于大多数情况来说，固定位置的下划线已经足够满足需求了。
网友留言：