By Stephen Walker

List of Links

Share

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 August 21, 2022

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES