CSS代码::选中以显示CSS文本装饰

Question

我的网站有问题，不知道如何修复。

我设置。。。

::selection {
background: #ff6f5e;
color: #fff;
}

使用普通文本，Chrome中的一切都很好。所选文本的背景显示为红色，字体的颜色为白色。

但当我选择链接(它们是CCS下划线(时，下划线就会消失。我不喜欢这个，它也只在Chrome中，而不是在Firefox和Safari中。

这是我的一篇博客文章的URL：

https://www.smart-minded.com/en/business/unbounce-alternatives/

我已经试过了。。。

::selection {
background: #ff6f5e;
color: #fff;
text-decoration-color: #333;
}

但它不起作用。

有人知道如何解决这个问题吗？

Answer 1

这似乎是Google Chrome处理::selection的一个怪癖。作为一种尝试和错误的方法，我考虑了如何将text-decoration值应用于::selection中的锚链接，如下所示：

:any-link::selection {
text-decoration: ...
}

当然，这不起作用，所以我再次尝试和错误的时间。。。为什么不设边界？

:any-link::selection {
border-bottom: 1px solid blue;
}

同样，这不起作用，因为::selection可以应用于它的声明数量有限。这让我找到了最简单的解决方案：新的背景色。看到

::selection {
background: #ff6f5e;
color: white;
}

:any-link::selection {
background: blue;
}

<p>One of the most well-known landing page builders out there is <a href="https://unbounce.grsm.io/moritzbauer8085" target="_blank" rel="nofollow">Unbounce</a>. While the platform does come with great features, templates, and the ability to integrate with third-party tools, it is pretty pricey. </p>

因为::selection允许我们更改background和color之类的内容，所以您仍然可以实现锚定标签与文本其余部分分离的可访问性优势。