链接上的彩色下划线，不带链接的图像下划线答案

【问题标题】：Coloured underlines on links without underlining image with links链接上的彩色下划线，不带链接的图像下划线
【发布时间】：2013-11-01 12:52:15
【问题描述】：

谁能帮我在不使用border-bottom: 1px #fff; 技术的情况下尝试在链接下添加不同颜色的线（文本）？

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

【问题讨论】：

为什么不在图片链接中添加一个额外的类？
唯一的办法就是使用边框，而且你必须使用像a {border-bottom: 1px solid #f00;}这样的通用元素选择器，所以不要那样做，改用class或nested选择器
图片链接的边框不能关闭吗？一个 img {border: 0;}
@user2910731: 你能加个fiddle

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

所以请您使用box-shadow inset 并设置值

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

【讨论】：

【解决方案4】：

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

【讨论】：