html - Wired 杂志是如何实现这种粗下划线链接效果的？

Question

我最近注意到 Wired 杂志的链接有一条蓝色下划线，该下划线很粗，横跨文本下行部分，并且颜色与文本不同。这是一个 random page举个例子。

我不认为这是用 bottom-border 完成的，因为它与文本下行部分重叠。颜色不同可能是通过新的 -moz-text-decoration-color 和 text-decoration-color 声明完成的，但我无法确定是否有任何帮助一个控制线的粗细。

当然，我曾尝试通过分析 their CSS 来取证, 但它最小化和复杂，我无法通过所有的刷子来获取我需要的信息。我尝试搜索关键字，如 -moz-text-decoration-color 和 border-bottom，但没有成功。

有人知道他们是怎么做到的吗？

Answer 1

如果您检查一个链接，您会看到:

border-bottom: 1px solid #CBEEFA;
box-shadow: 0px -4px 0px #CBEEFA inset;

您可以在 this article 中阅读有关使用 box-shadow 的原因。 .