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
RELATED ARTICLES
If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.
I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.
This is a style for creating a food menu whit a dashed line between the item and the price.
Using Avada elements in the block editor to optimize tips and tricks.
