使用“文本装饰颜色”不起作用答案

【问题标题】：Use of "text-decoration-color" is not working使用“文本装饰颜色”不起作用
【发布时间】：2018-02-09 02:37:09
【问题描述】：

我想给文字装饰上色。我从w3schools得到了一个教程

并尝试了这个

text-decoration: underline;
text-decoration-color: #dddddd;

但它不起作用。这无效吗？有没有其他方法可以给下划线上色？

【问题讨论】：

见stackoverflow.com/questions/12557707/changing-underline-color
Changing Underline color的可能重复

标签： css

【解决方案1】：

text-decoration-color 拥有minimal browser support

相反，您可以使用像跨度这样的东西来重新着色您的文本：

p {
  color: red;  /* colour of underline */
  text-decoration: underline;
}

span {
  color: black; /* original colour of p */
}

&lt;p&gt;&lt;span&gt;underline is red, text is black&lt;/span&gt;&lt;/p&gt;

【讨论】：

欲了解浏览器支持的更详细视图，请参阅caniuse.com

【解决方案2】：

您的代码可能会影响另一个类

p {
    text-decoration: underline;
    text-decoration-color: red!important;
}

&lt;p&gt;test&lt;/p&gt;

【讨论】：

它不工作。我正在使用 Chrome。可以试试看吗？

【解决方案3】：

更新：它适用于带有 -webkit- 前缀的 Safari 和 Safari iOS！

p {
    text-decoration: underline;
    text-decoration-color: red;
    -webkit-text-decoration-color: red;
}

&lt;p&gt;test&lt;/p&gt;

【讨论】：

【解决方案4】：

以下方法添加到字符串中的行下。

1) 您可以使用 text-decoration 在字符串底部添加下划线，如下所示。请尝试以这种方式添加您的 CSS。

以下演示很适合我。

<style type="text/css">
.underline 
{   
    text-decoration: underline;
    text-decoration-color: red;
    /*color: blue;
    border-bottom: 1px solid red;*/
}
</style>

<span class="underline">hello world</span>

2）如果尝试在第一步中归档，您可以尝试第二种方式在字符串底部设置边框

<style type="text/css">
.underline 
{   
    /*text-decoration: underline;
    text-decoration-color: red;*/
    color: blue;
    border-bottom: 1px solid red;
}
</style>

<span class="underline">hello world</span>

【讨论】：