Question

我想为文字装饰上色。我从w3schools

获得了一个教程

试过这个

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

但它不起作用。这不是有效的吗？还有其他方法可以为下划线着色吗？

Answer 1

text-decoration-color有minimal browser support

相反，您可以使用跨度来重新着色文本：

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

<p><span>underline is red, text is black</span></p>

Answer 2

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

＆＃13;

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

＆＃13;

<p>test</p>

＆＃13;

Answer 3

按照字符串中的行添加方法。

1）您可以使用文本修饰在字符串底部添加下划线，如下所示。请尝试以这种方式添加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>

Answer 4

更新：它可以在带有-webkit-前缀的Safari和Safari iOS上运行！

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

<p>test</p>

使用＆＃34; text-decoration-color＆＃34;不管用

4 个答案: