I am working on a new project and recently discovered some great CSS features — text-underline-position and text-decoration-thickness. These allow you to style hyperlinks and add some interesting hover and focus effects. Previously I had used padding and borders, but this is so much better because it does mess with the word spacing. Add list–links to a text element and let the CSS do the rest.
.list--links ul{
list-style:none;
padding:0;
margin-top:0 /* used for multicolumn text elements */
}
.list--links li{
margin-bottom:8px;
}
.list--links li a{
text-decoration:underline;
text-underline-position:under;
transition:all linear .3s;
}
.list--links li a:hover,.list--linksli a:focus{
outline:none;
text-decoration-thickness: 3px;
}Example:
Originally published on Aug. 21, 2022
