Do you underline links and show a clear hover effect?

<introEmbed body={<> Ensure your links are easily distinguishable from the background and surrounding text by **always making them underlined**. Users expect underlined texts to be a link; and links to be underlined. </>} />

Note: Underlines are not necessary on obvious links, like menu/breadcrumb items or buttons. On the other hand, hover effect (see more below) should always exist.

Never underline a text that isn't a link

Use bold or another styling if you need emphasis.

Include a hovering effect

Rollovers are also important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; color change is recommended because it preserves text readability. Hover the good example above to see this working.

The basic CSS for changing the link color on hover is:

a:hover {
    color: #cc4141;
}

Avoid other effects on hover for text

Effects like bold, scaling, rotation, or background changes can distort text, making it harder for users to read and interact with links.

Note: These effects may be used for buttons or other non-text content elements.

Do not use borders to replace underlines

The default implementation of underlines in CSS is text-decoration: underline;.

Another way to add look-alike underlines is by adding border-bottom: 1px;, for example. In this case, you could even have a dotted line under the text. It's not recommended you use this method - It may create extra pixels in the interface, which can potentially cause other problems in your UI: