Html 《连线》杂志是如何实现这种粗下划线链接效果的？

我最近注意到，《连线》杂志的链接有一个蓝色下划线，很厚，交叉在文本的下半部分，颜色与文本不同。这里有一个例子

我不认为这是用

下边框来完成的，因为它与文本的下边框重叠。新的
-moz文本装饰颜色
和
文本装饰颜色
声明可能会产生不同的颜色，但我无法确定是否有任何东西可以帮助控制线条的粗细

当然，我曾试图通过分析来进行法医学鉴定，但这是最小化和复杂化的，我无法通过各种手段获得我需要的信息。我试着搜索一些关键术语，如
-moz text-decoration-color
和
border-bottom
，但没有成功

有人知道他们是怎么做的吗？
如果你检查一个链接，你会看到：

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

您可以阅读有关在CSS中使用
框阴影的推理。

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

根据学校的说法

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

注意：长方体阴影属性将一个或多个放置阴影附着到
盒子。该属性是以逗号分隔的阴影列表，每个阴影都是指定的
由2-4个长度值、可选颜色和可选插图组成
关键词。省略的长度为0

您可以使用Chrome和Firefox的inspect元素工具。在链接上单击鼠标右键，然后单击“检查图元”。看起来是这样的：


你可以看到它是边框底部和框阴影。
他们以前使用.png来获得效果，但我很高兴看到他们最终使用了纯CSS方法。这还包括如何过滤样式应用于哪些元素

例如，这将对网站上的所有链接应用有线样式链接下划线：

/*----Wired Style Links----*/
a:link{
   text decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover:link:{
background-color: #B4E7F8;
}

这将免除内部链接（在yourwebsite.com上）的样式设置：

/*----Wired Style Links----*/
a[href*="//"]:not([href*="yourwebsite.com"]){
   text decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover[href*="//"]:not([href*="yourwebsite.com"]){
background-color: #B4E7F8;
}

如果你想为网页上的任何文本细化CSS，你可以在你的crome中使用Chrome Inspector（F12）。谢谢你的回复。
边框底部是否仅用于向后兼容？可能是的。这是为了这个，但我不能说这是“仅仅”为了这个。任何人都知道当链接被访问时如何改变框阴影的颜色，或者为什么他们会使用框阴影。我只需要一个边框就可以得到同样的效果。如果你能在回答中提供一个CSS演示，同时引用你的链接作为参考，那将是最好的。