如何实现这种带下划线的链接？

【问题标题】：How do I achieve this style of underlined link?如何实现这种带下划线的链接？
【发布时间】：2015-02-28 23:34:14
【问题描述】：

我不想知道如何突出显示或下划线。

我想知道这是怎么做到的：

我第一次看到 Wired 在 Chrome 内的 Android note 3 上使用了此功能。

【问题讨论】：

【解决方案1】：

访问 Wired 文章并使用 Web Inspector，我发现了创建此效果的 CSS 规则：

a {
   border-bottom: 1px solid #cbeefa;
   box-shadow: inset 0 -4px 0 #cbeefa;
   color: inherit;
   text-decoration: none;
}

以下是这些规则的实际应用示例：

a {
  border-bottom: 1px solid #cbeefa;
  box-shadow: inset 0 -4px 0 #cbeefa;
  color: inherit;
  text-decoration: none;
}

This is <a href="http://google.com">a link to Google</a>.

Another link goes <a href="http://stackoverflow.com">to the Stack Overflow homepage</a>.

【讨论】：