如何设置超链接的颜色和位置下划线？

Question

是否有任何解决方案可以将颜色和设置为符合所有这些条件的超链接的垂直位置？

1. 适用于现代浏览器，
2. 需要纯CSS （不添加HTML元素或JavaScript），
3. 也适用于链接分成几行的情况（这是我所知道的大多数解决方案的主要缺点），
4. 无论超链接具有display值（inline，block，inline-block或更精细），都可以正常工作。

我查看了所有Q＆amp; A但我发现的每个解决方案都因一个或多个这些标准而失败。

Answer 1

要自定义下划线，您可以为“a”元素添加边框。

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

Answer 2

我总是在这个

中使用伪类:before和:after

我担心我建议的解决方案也不符合多行链接的要求;但你在这里很有价值。您是否希望在每行中加下划线一次或整个链接？ （我认为后者看起来并不甜蜜）

只有这种技术的前提： 元素必须是静态以外的任何其他位置 元素需要:before或:after

在这里观看： http://codepen.io/katerlouis/pen/xOWPRG

a {
    color: blue;
    text-decoration: none;
    position: relative;

    &:before {
        transition: all 100ms ease-out;
        content: "";
        position: absolute;
        bottom: -5px; 
        left: 0; right: 0;
        margin: auto;
        width: 60%; height: 2px;
        background: red;
    }
    &:hover:before {
        width: 100%;
    }
}