html - 文本装饰颜色不适用

Question

非常简单的问题，但它让我很沮丧。在页面的导航栏中，我希望它通常是一种颜色，然后具有不同颜色的悬停效果。

检查元素时，由于某种原因取消了颜色，我不确定原因。

Screenshot of chrome Inspection

.navigation {
  text-align: center;
  padding: 0 0;
  font-size: 1.25em;
  letter-spacing: .1em;
  text-decoration-color: #ee8719;
  margin: 0;
}

.homenav {
  text-decoration-color: #ffffff;
  color: black;
}

a:hover {
  color: #ad6205;
}

ul li {
  display: inline;
  text-decoration-color: #ee8719;
}

<header class="banner">
  <nav class="navigation">
    <ul class="homenav">
      <li>
        <a href="">Projects</a>
      </li>
      <li>
        <a href="">Blog</a>
      </li>
      <li>
        <a href="">About</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
  </nav>
</header>

感谢任何帮助

Answer 1

这实际上是the spec中定义的行为对于 text-decoration 样式:

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

(更多详情请访问 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

如果您想设置文本颜色，那么只需使用color 属性即可。