why is text-decoration considered part of the foreground

Question

<span>Teaching kids to reach their creative and intellectual potentials through Computer Science.</span>

Above is my HTML and below is my CSS:

span { text-decoration: underline; color: red }

If text-decoration is considered part of the foreground, than how can the text-decoration-color property change the text-decoration color without changing the color of the font?

Very rude, I actually just read the documentation (foreign words and non-explicit annotations). — Kevin Behan, Nov 01 '16 at 22:50
Which documentation? I recommend reading HTMLDog - http://www.htmldog.com/references/ - it's mainly for HTML 4 Strict, but can be used for HTML5 as well. — junkfoodjunkie, Nov 01 '16 at 22:53

score 0 · Answer 1 · answered Nov 01 '16 at 22:34

0

Use -webkit-text-decoration-color to change it on Chrome. However, note that Experimental Web Platform Features has to be enabled for it to work. So for now, Chrome just simply does not support this css property.

answered Nov 01 '16 at 22:34

Sub 6 Resources

1,674
15
31

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You can't use text-decoration-color cross browsers. See text-decoration-color support browsers. If you really needed to change the underline color maybe this link can help you. CSS text-decoration underline color

edited May 23 '17 at 12:00

Community

1
1

answered Nov 01 '16 at 22:37

Rohman HM

2,539
3
25
40

score 0 · Answer 3 · answered Nov 01 '16 at 23:19

This can be achieved, however, it requires your text to be wrapped in a <span> tag.

Instead of using the <u> tag use text-decoration with underline as a value.

Code Snippet:

p {
  color: red;
  text-decoration: underline;
}
span {
  color: gray;
}

<p><span>Teaching kids to reach their creative and intellectual potentials through Computer Science.</span>
</p>

why is text-decoration considered part of the foreground

3 Answers3