“连线”杂志如何实现这种厚重的下划线链接效果？

Question

我最近注意到，“连线”杂志的链接有一个蓝色下划线，这些链接很厚，跨越文本下降，并且与文本颜色不同。这里以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的原因。

Answer 2

在CSS

中

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

根据W3Schools

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

  

注意：box-shadow属性会将一个或多个阴影附加到   框。该属性是以逗号分隔的阴影列表，每个阴影都指定   2-4个长度值，一个可选颜色和一个可选插图   关键词。省略的长度为0。

Answer 3

您可以使用Chrome和Firefox的inspect元素工具。右键单击链接，然后单击inspect元素。它看起来像这样：

你可以看到它是边框底部和框阴影。

Answer 4

他们曾经使用.png来获得效果，但是我很高兴看到他们终于使用了纯CSS方法。 quick guide explains how to do it via CSS stylesheet以及如何过滤应用样式的元素。

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

/*----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;
}