By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Remove dots under a required form label

    Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you're not seeing things.

  • Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround