文本的下划线的几种方式

1、text-decoration:underline

2、利用元素的下边框实现下划线效果，可以通过line-height调节距离

.underline {
  font-weight: 600;
  border-bottom: 1px solid #000;
  line-height: 1.5;
}

缺点：如果文本换行，也只显示底部一行的下边线

3、background，利用background-size（控制下划线粗细）、background-position（控制下划线位置）实现高度可定制话的下划线

.underline {
  display: inline-block;
  font-size: 14px;
  background: linear-gradient(grey, grey) no-repeat;
  background-size: 100% 2px;
  background-position: 0 24px;
  font-weight: 600;
  background-attachment: fixed;
}

Firefox 和 Opera要设置background-attachment: fixed;
background-position: 0 24px;（分别指x，y轴的距离px）