css - 更改悬停在 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>