html - 使用自定义选择颜色突出显示带下划线的文本时，不显示下划线

Question

我正在制作一个带有自定义选择颜色的网页。

::selection {
    background-color:#00ffff;
}

但是看看这个场景:

p::after {
    content:"Try selecting the above elements. The underline is not preserved, but the italic is preserved."
}
::selection {
    background-color:#00ffff;
    text-decoration:auto;
}

<u>Select me!</u>
<i>Select me!</i>
<p></p>

那么，如何在所选文本中保留下划线？

Update:
I'm using Chrome 92.0.4479.3 (canary build) on Microsoft Windows 10 Home.
Screenshot:

Answer 1

您只需要在 rgba 模式或 hsla 模式甚至十六进制代码中设置选择的背景颜色，并为 alpha 值(可以设置 alpha 值的任何模式)添加 2 位数字，并将 alpha 值从 1 减少。大约 0.5 对我来说似乎合适。太高的 alpha 值会隐藏选区下方的下划线。