I'm trying to edit the style of my hyperlink to be underlined like it currently is, but have a bit more space between the word and the underline.

Is this possible?



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;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.