选中时在文本中加下划线

Question

想法：
在选择文本部分时，我希望文本下划线(最好是像这里这样的颜色渐变(，而不是更改背景。根据Mozilla的说法，text-decoration是可能的，text-decoration: underline也是可能的。

问题：
(text-decoration和::selection不适用于我(Chrome和Edge(-已解决(。

解决方案的想法：
在进行选择(在CSS中(时，是否可以将文本下划线作为渐变？我的一个想法是使用JavaScript来查看文本是否被选中，然后在文本之间添加一个id="underline"左右，然后它包含渐变线的CSS代码。


进度：
整个过程不是用纯CSS实现的。我现在已经更改了代码，这样当一个选择也是文本时，文本就会适当地加下划线。

进度问题：
即使在单击所选内容后，该行仍会保留。

当前代码：

function wrapSelectedText() {       
var selectedText = window.getSelection().getRangeAt(0);
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
/* Styling */
span.style.backgroundImage = "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)";
span.style.backgroundRepeat = "no-repeat";
span.style.backgroundSize = "100% 0.2em";
span.style.backgroundPosition = "0 88%";
span.appendChild(selectedText);
selection.insertNode(span);
}
document.onmouseup = document.onkeyup = document.onselectionchange = function() {
wrapSelectedText();
};

::selection {
background: none;
}

<p>This is an example text.</p>

Answer 1

文本装饰需要已经存在于元素上，通过在p元素上定义text-decoration: underline overline transparent;，它确实可以工作。

::selection {
background: yellowgreen; /* To check if the text is selected */
text-decoration: underline overline #FF3028; /* Only works on elements that have the same decoration properties set already */
}
p {
color: black;
font-size: 18px;
text-decoration: underline overline transparent;
}

<p>This is an example text.</p>