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

【问题标题】：When highlighting underlined text with custom selection color, underline does not show使用自定义选择颜色突出显示带下划线的文本时，下划线不显示
【发布时间】：2021-07-01 13:49:20
【问题描述】：

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

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

【问题讨论】：

我不明白这个问题，下划线保留在您发布的sn-p中。

标签： html css selection

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：