有下划线的标签是 <u>自带下划线</u>，但是此标签不设置下划线样式、和文本的距离等；
可以换个思路，使用<span>标签，加样式 border-bottom: 1px solid red变相设置下划线及其颜色、样式。再加上 padding-bottom: 5px即可设置下划线与文本的间隔距离。
显示的图片：
如果是文字和下划线颜色相同,那可以直接定义a标签的CSS,指定颜色如果文字和下划线颜色不同.那么可以这样:
<a
href="#"
class="test"><span>teste</span></a>
定义a标签的文字颜色,去掉下划线...然后再定义
<span>的CSS设置下边框边线即可
方法和详细的操作步骤如下：
1、第一步，如果要修改下划线的颜色，大小和其他样式，可以通过border属性设计，使用起来更灵活，见下图，转到下面的步骤。
2、第二步， 执行完上面的操作之后， border-bottom属性用于设置底部边框样式，见下图，转到下面的步骤。
3、第三步， 执行完上面的操作之后，border-bottom: #FF0000 2px solid ； 将边框大小设置为2PX红色边框，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，观察到相同的效果，发现下划线是整个屏幕的宽度，因此接下来将更改宽度，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，宽度设置为180px，可以根据实际情况进行调整，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，将显示下划线效果，见下图。这样，就解决了这个问题了。
