一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
方法一：text-decoration-skip指定覆盖关系text-decoration-skip是与text-decoration相关的CSS3属性。效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。此方法是最原生的，但是由于兼容性问题，目前还不太合适。方法二：使用border-bottom属性模拟我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）代码如下：a {text-decoration: noneborder-bottom: 1px solid}这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线 :Pa {text-decoration: noneborder-bottom: 1px dashed}效果图：金玉全王方法三：使用box-shadow属性模拟使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)直接上代码~a {text-decoration: nonebox-shadow: 0 1px}这里box-shadow用了两个值，在这里解释一下：box-shadow: h-shadow v-shadow blur spread color inset此处的两个值分别是 h-shadow 和 v-shadow。h-shadow：水平阴影的位置。允许负值。v-shadow：垂直阴影的位置。允许负值。垂直阴影为1px于是就有了下划线的样子。相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。一个是border-bottom: 1px dotted #000黑色1像素点边框，这是块级元素还有一种是缩写，<abbr>文本</abbr>，这种是不是常规的CSS样式，而是缩写标签，但可以在内嵌元素上使用，外观是点下划线。
