【问题标题】:Changing <a> link underline color更改 <a> 链接下划线颜色
【发布时间】:2009-07-24 01:25:40
【问题描述】:

不知道有没有什么技巧可以解决这个问题。

我的链接如下文所示,想更改下划线颜色。

此链接包含多行,需要将下划线颜色更改为比现有颜色浅

使用边框底部不是解决这个问题的方法,因为多行。

有什么技巧可以解决这个问题吗?

编辑

@Paolo Bergantino:它适用于 IE8,是否可以用 IE6,7 破解?

【问题讨论】:

  • 实际上,它在 IE7 上也不适用于我。这很奇怪。
  • 啊,我测试错了windows,只适用于IE8
  • 抱歉,我什么都没想到。
  • 没关系,我也试过了,但还没有找到任何东西。感谢您的帮助:)
  • 2021年可以使用text-decoration-color stackoverflow.com/a/29996777/3335517

标签: css cross-browser


【解决方案1】:

或者你可以使用边框。此方法适用于ie6。

HTML

<a href="#" class='underline'>
  <span>this just</span><br/>
  <span>a test</span><br/>
  <span>of underline color</span>
</a>

CSS

  a.underline {
    text-decoration: none;
  }
  a.underline span {
    display: inline-block;
    border-bottom: 1px solid red;
    font-size: 15px;
    line-height: 12px;
  }

示例:http://jsfiddle.net/skanY/1/embedded/result/

【讨论】:

【解决方案2】:

如果有人感兴趣 - 这对我有用 - text-decoration-color CSS 属性:

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

2121 更新:这很好用!其他有用的 CSS 是 https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset,用于控制下划线和文本之间的距离。

【讨论】:

  • 理想的解决方案,但它仍然不受 chrome 支持:(
  • 这是用于现代浏览器的属性。
  • 目前所有主流浏览器都支持这个属性。
  • 带着这个答案登上月球! ?
【解决方案3】:

如果您的意思是与文本不同的下划线颜色,我唯一能想到的就是在链接周围添加一个跨度:

<span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

然后是 CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

还有you get what you want

编辑

再进一步测试一下,它在 IE 上对我不起作用。但是,如果您添加border-bottom,它在所有浏览器中都可以正常工作,只是IE 没有在最后一个下添加边框。我会尝试更深入地挖掘,看看是否有跨浏览器的方式来做到这一点......

【讨论】:

  • 如果每个主流浏览器都支持:before:after 伪选择器,这个例子会更酷。
  • 这将影响所有链接选择器,因此用户将无法区分他们访问了哪个链接。
  • 我会记下这个以备将来参考,它如此简单却完美。
【解决方案4】:

Paolo Bergantino 的回答似乎不适用于我在 OSX 上的 Chrome (v19.0.1084.56) 上。然而,在 a 标签内移动 span 似乎可以解决问题。

HTML

<a class="underline" href="#">
    <span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>​

还有 CSS

.underline {
    color: red;           
}

.underline span {
    color: gray;           
}

您可以在这里查看:http://jsfiddle.net/itsmappleby/f4mak/

【讨论】:

  • 适用于 FF、IE6-10、Chrome、Safari。
【解决方案5】:

下划线,作为文本属性,继承了文本的颜色。所以我怀疑是否有一种方法可以显式更改下划线颜色而不更改文本颜色。

【讨论】:

    【解决方案6】:

    链接的下划线将始终与文本颜色相同。

    【讨论】:

      【解决方案7】:

      很抱歉提出一个老问题,但我遇到了同样的问题,但没有找到令人满意的答案,所以我想出了一个不同的解决方案,并想与你分享。

      它确实包含 1x1 背景图像(或您喜欢的任何尺寸),但它干净简单 - 并且 100% 兼容浏览器(从 IE6 及更高版本测试)。

      此示例中的文本会改变颜色,而下划线保持不变。你可以用其他方式轻松地做到这一点。

      a, a:link, a:active, a:visited{
          text-decoration:none;
          color:#888;
          background:transparent url('underline.png');
          background-position:0 10px;
          background-repeat:repeat-x;
      }
      
      a:hover{
          color:#009ee0;
      }
      

      【讨论】:

        【解决方案8】:

        我知道这是一个老问题,但我想我会添加这个......

        a:active, a:link, a:visited{
            background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
            text-decoration: none;
            background-size: 2px 2px;
            background-position: 0 1.2em;
            background-repeat: repeat-x;
        }
        

        注意:不完全支持旧浏览器支持

        【讨论】:

          【解决方案9】:

          链接上的下划线是用text-decoration css样式完成的,我认为它与文本颜色相同。

          如果您将 text-decoration 设置为 none 然后添加一个border-bottom,您可以使用border-color 样式更改颜色。

          【讨论】:

            【解决方案10】:

            您也可以使用此代码制作不同颜色的下划线。使用边框

            h1{
                 边框底部:1px 实心#AAAAAA
            }
            

            编辑: 你可以使用java脚本在文本下画一条线

            【讨论】:

            • 欢迎来到 Stack Overflow!不幸的是,您的回答在这里似乎没有帮助:OP 明确表示“使用边框底部不是解决此问题的方法,因为多行。”
            猜你喜欢
            • 2012-09-15
            • 2015-04-08
            • 2021-04-30
            • 2017-07-23
            • 1970-01-01
            • 1970-01-01
            • 2020-10-03
            • 2018-09-11
            相关资源
            最近更新 更多