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

问题描述

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

::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:

解决方法

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

不要像这样使用自动使用继承来进行文本装饰：

::selection{
      background-color: #00f;
      text-decoration: inherit;
    }

这样它应该继承父元素的文本装饰。

html selection