利用CSS，链接下划线也玩自定义

下面是利用CSS自定义链接下划线的攻略：

第一步：取消下划线

首先，要实现自定义下划线，首先需要取消默认的下划线。这可以通过CSS中的text-decoration属性来实现。将其设置为none即可取消下划线。

a {
  text-decoration: none;
}

第二步：使用border-bottom添加下划线

取消下划线后，需要使用其他方式添加下划线。在这里，我们可以使用CSS的border-bottom属性来添加链接下划线。将border-bottom设置为所需的颜色和宽度，即可添加下划线。例如：

a {
  text-decoration: none;
  border-bottom: 1px solid #FF0000;
}

上面的代码将添加一个红色、宽度为1个像素的下划线。可以根据需要调整颜色和宽度。

示例一：悬停下划线

我们可以进一步提升用户体验，当用户悬停在链接上时，让下划线变得更显眼一些。这可以通过为a:hover设置不同的下划线样式来实现。例如：

a:hover {
  border-bottom: 2px dotted #FF0000;
}

上面的代码表示当用户把鼠标悬停在链接上时，链接下划线将变为2个像素宽的红色点线。可以根据需要调整样式。

示例二：下划先渐变效果

我们可以使用CSS的linear-gradient函数，为链接下划线添加渐变效果。例如：

a {
  text-decoration: none;
  background: linear-gradient(to right, #FF0000, #00FF00);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

上面的代码表示添加一条从红色到绿色的横向渐变背景，作为链接下划线。需要注意的是，为了保证链接下划线与链接文字之间有一定的距离，需要为链接下划线添加一个3像素高度的background-size属性。同时需要设置background-repeat为no-repeat，并使用background-position将渐变背景位置设置在链接下方。

这样就可以实现带渐变效果的自定义链接下划线了。