一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
先在head里加上：<style type="text/css">
<!--
.aaa {
border-bottom-width: 1px
border-bottom-style: dashed
border-bottom-color: #000
}
-->
</style>
然后要用效果的地方就这样：
<font class="aaa">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
ssssssssssssssssssssssssssssssssssssssssss<br />
mmmmmmmmmmmmmmmmmmmmm
</font>
测试过，没有问题~
有时候UI设计的时候文字下方会有一个下划线，所以我们经常用 text-decoration:underline 来设置一个下划线，但是呢，发现这个下划线和文字特么的重合了，来没法设置，只能用别的方法代替了，啪啪啪的写一大堆css
现在宣布： 春天来了: text-underline-offset
这个css可以设置距离文字的距离，百分比，还有一个注意点就是一定要和 text-decoration:underline 一起使用，否则不起作用，下面看一个例子
html
css
