STARIKOVS

So, how to change underline style for hyperlink? It’s easy! Just you should set several CSS styles.

The main idea, is that you disable text-decoration for links, then make links to have a box model by adding display with inline-block value. After this, links have a box model and we may change bottom border of links as wel as borders of other sides, paddings and margins. By changing bottom border we achieving desired results:

1
2
3
4
5
6
7
8
9

a {
  display: inline-block;
  border-bottom: 1px dashed #ccc;
  text-decoration: none;
}
 
a:hover {
  border-bottom: 1px solid #aaa;
}

You can change bottom border size, style and color to get the border you want, it’s may be thick, dotted or dashed link underline style, or any other border you can make with CSS.

Try this sample http://codepen.io/starikovs/pen/rLFuf.