CSS為什么overline不會在懸停時改變顏色和樣式？

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: ' ';
}

在這里查看更新的小提琴： https : //jsfiddle.net/ytq235an/6/

Answer 2

似乎只有Firefox支持。 w3schools文字裝飾風格

Answer 3

如果您希望將懸停在div上方時顯示上划線

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

Answer 4

text-decoration-color僅在Firefox中受支持（ 請在此處查看參考 ）

---

可能的解決方案：

.subboto a:hover {
    border-top: 1px dashed #f7a319;
}

的jsfiddle

Answer 5

谷歌快速搜索將我帶到了本教程： http : //www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

我單擊“自己嘗試”按鈕，但下划線不是應該的紅色。 文字指出，任何主流瀏覽器均不支持該功能，但是firefox確實具有自定義選項。

除非您只在firefox上工作，否則您將不得不以其他方式進行操作

參考此圖片： http : //i.stack.imgur.com/qbTXE.png