Search code examples
hyperlinkhighlightunderline

How do I achieve this style of underlined link?

I don't want to know how to highlight or underline something.

I'm wondering how this was done:

enter image description here

I first saw this being used by Wired on an Android note 3 inside Chrome.

Solution

  • Visiting a Wired article and using the Web Inspector, I found the CSS rules that create this effect:

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

    Here's an example of those rules in action:

    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>.