在 SCSS / CSS 中自定义颜色的文本选择中更改下划线的颜色？

Question

我在颜色 (A) 的悬停上有一个下划线。我需要将它更改为选择内的另一种颜色（在突出显示的文本内）。

问题在于下划线不会改变突出显示（选定）文本内的颜色。

截图：

• 1) Here is a screenshot of the highlighted text without hover - this is correct
• 2) Here is a highlighted text with hover - it should show a black underline

请问有人知道如何使它在第二个屏幕截图中显示下划线，样式为黑色？

---

这是从@Pawan-Kumar 的答案中借用的经过简化和编辑的代码示例（我的原始代码令人困惑）：

.link{
  color:blue;
  cursor:pointer;
}

.link:hover{
color:lightblue;
  text-decoration: underline;
  text-decoration-color: red;
}

.link::selection{
  background-color:lightblue;
   
}
.link:hover::selection{
  background-color:yellow;
  text-decoration-color: black; /* This does not work*/
}

<span class='link'>This link</span> should have black underline inside highlighted text.

Answer 1

试试下面的css。

.link{
  color:blue;
  cursor:pointer;
}

.link:hover{
color:lightblue;
  text-decoration: underline;
  text-decoration-color: red;
}

.link::selection{
  background-color:green;
   
}
.link:hover::selection{
  background-color:yellow;
}

The color of the lines should be normal
<span class='link'>The color of the lines should be change</span>

Answer 2

我想通了：不可能……

只有少数 CSS 属性可以应用于 ::selection 选择器：颜色、背景、光标和轮廓

文档的链接是here。

只有 Firefox 的 has text-decoration 属性可以放入 ::selection。