html - CSS 为什么上划线在悬停时不会改变颜色和样式？

Question

我正在尝试做一些链接，当你 :hover 出现一个颜色与文本颜色不同的上划线时，这里的代码对我来说似乎是正确的，但不起作用，我不知道为什么 :S

.subboto a:hover {
   text-decoration: overline;
   text-decoration-color: #f7a319;
   text-decoration-style: dashed;
}

JSFiddle

Answer 1

text-decoration-color 仅在 Firefox 和 Safari 中受支持。看看这里的文档，https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

如果你想这样做，你可以这样做

.subboto a:link, a:visited {
    text-decoration: none;
    color: black;
    position: relative;
}

.subboto a:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px dashed #f7a319;
    content: ' ';
}

在这里查看更新后的 fiddle :https://jsfiddle.net/ytq235an/6/