有时候UI设计的时候文字下方会有一个下划线，所以我们经常用 text-decoration:underline 来设置一个下划线，但是呢，发现这个下划线和文字特么的重合了，来没法设置，只能用别的方法代替了，啪啪啪的写一大堆css
现在宣布： 春天来了: text-underline-offset
这个css可以设置距离文字的距离，百分比，还有一个注意点就是一定要和 text-decoration:underline 一起使用，否则不起作用，下面看一个例子
html
css
一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
这个超链接都是系统默认的，它是有一定空隙和间距的，你说的问题我也碰到过，是中间有地方代码错了，少代码或者代码不规范，再认真检查一下，问题也就出来了。还有一种解决方法也很快
a:link,a:visited{color#000font-size:12pxtext-decoration:none}
a:hover{border-bottom:1px solid #000color:#ff0000}
如果你感觉还是紧的话，就在a:hover加放padding-bottom:2px这个可以调大小。
