如何实现这种带下划线 link 的样式？

Question

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

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

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

Answer 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://whosebug.com">to the Stack Overflow homepage</a>.

How do I achieve this style of underlined link?