自定义下划线

边框

您可以在链接底部应用一个边框，这样您就可以控制下划线的颜色（而 `text-decoration` 只会应用链接文本本身的颜色作为下划线），还可以控制边框的样式。

a {
    text-decoration: none;
    border-bottom: 2px dotted #0c0;
}

图片

为链接应用更具吸引力的下划线的另一种方法是使用小的背景图像，这些图像沿链接底部对齐并水平重复。

p {
    line-height: 2;
}

a {
    text-decoration: none;
    padding-bottom: 5px;
    background: url(images/underline_greenspots.gif) bottom repeat-x;
}

如果您使用此方法，您需要确保包含块（在本例中为段落）有足够的空间用于下划线。通常，您还需要在链接底部添加一些内边距，以便背景图像位于文本下方，而不是在文本后面。

参阅上面提到的方法的示例的集合。

过渡

可以使用如下 CSS，在鼠标悬停在链接上时打开和关闭基本下划线。

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

然而，过渡可以给您更多控制权，您可以保留下划线，但不是简单地显示和隐藏它，而是可以在两种颜色之间进行淡入淡出。

a {
    color: rgb(0,102,204);
    text-decoration: none;
    border-bottom: 2px solid rgba(0,102,204,.2);
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover {
    border-color: rgb(0,102,204);
}

这将从一个半透明的淡入下划线开始，当链接被悬停时，它会平滑地变成纯蓝色。

您可以在“简单的 CSS 过渡示例页面”中看到此主题的变体。