链接上的彩色下划线没有带链接的下划线图像

Question

任何人都可以试着在不使用border-bottom: 1px #fff;技术的情况下在链接下添加不同颜色的线（到文本）吗？

目前，当我使用这种技术时，它也会在任何带有链接的图形下放置一条线。

Answer 1

检查一下：

风格：

article {
      text-decoration: underline;
      color: green;
}
span.red_text {
      color:red;
}

Html：

<article>      
    <span class="red_text">The text color is red!</span>      
</article>

<强> Demo

Answer 2

这可以帮到你。使用css，您可以自定义链接的下划线
http://alistapart.com/article/customunderlines

Answer 3

你告诉过你不想使用border-bottom: 1px #fff;

因此，您可以使用box-shadow inset并设置值

box-shadow: 0px -1px 0px red inset;

Answer 4

如果你在任何带有链接的图形下面有一条线，你给的样式是， a {border-bottom: 1px #fff;}？ 而是创建一个类并将其仅应用于需要自定义下划线的链接，如

.customUnderline {border-bottom: 1px #fff solid;}

<a class="customUnderline">Your link</a>