CSS为什么overline不会在悬停时改变颜色和样式？

Question

im trying to do links that when you :hover appears an overline with a diferent color than the text, here's the code it seems to be correct for me but doesn't work and i dont know why :S

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

JSFiddle

Answer 1

text-decoration-color is only supported in Firefox and Safari. Take a look at the docs here, https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

If you want to do this you could do it like this

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

Take a look at the updated fiddle here: https://jsfiddle.net/ytq235an/6/

Answer 2

It seems to be only supported by Firefox. w3schools text-decoration-style

Answer 3

If you want the overline to show up when you hover over the div

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

Answer 4

text-decoration-color is only supported in Firefox ( check reference here )

---

Posible solution to your problem:

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

JSFiddle

Answer 5

A quick google search brought me to this tutorial: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

I clicked the "try it yourself" button but the underline wasn't red as it should be. The text states that it is not supported in any of the major browsers, but firefox does have a custom option.

Unless you're fine with it only working on firefox, you're going to have to go about it a different way

REFER TO THIS IMAGE: http://i.stack.imgur.com/qbTXE.png