Trying to chance my link style

This is done with CSS. You must use “border-bottom” property instead of “text-decoration: underline;” so you can have more flexibility with the line.

a {
    text-decoration: none; /* remove the default underline; */
    border-bottom: 1px solid blue; /* Set the border width and color. */
    padding-bottom: 3px; /* Set the distance between the word and the line */
}

Using border-bottom you can also have transitions which has a nice visual effect.

a {color: blue; border-bottom: 2px solid blue;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}

a:hover {color: blue; border-bottom: 2px solid red;}