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?

/

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?

https://stridedigital/

• links

1 Answer 1

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