How to change the color of a text-decoration on highlight/selected text

user_2348814 0
Viewed 1022

I've changed the color of my text when it's highlighted/selected, but I've just noticed that text-decorations are still black.

I added text-decoration-color: #fff to my ::selection css but it didn't take effect, does it need to be done another way?

My CSS is:

::-moz-selection {
  background: rgba($colorRed, .85);
  color: #fff;
  text-decoration-color: #fff;
}

::selection {
  background: rgba($colorRed, .85);
  color: #fff;
  text-decoration-color: #fff;
}
sass css
2 Answers

The text decoration will only work if is already styling an element.

text-decoration, on ::selection will only work on elements that have the same decoration properties set already.

p{
text-decoration:underline overline transparent;
}

::selection{
text-decoration: underline overline red;
background:green;
}
<p> SELECTED TEXT WILL DIFFER THAN UNSELECTED BE UNDERLINED</p>

text-decoration on selection is possible

user_139905930
Related