Style links so users can easily identify and interact with them.
Use links for navigation from one page or website to another.
Links within body text use --pl-color-fg-accent and are underlined by default so users can identify them without relying on color alone.
a {
color: var(--pl-color-fg-accent);
text-decoration: underline;
text-underline-offset: var(--pl-link-text-underline-offset);
text-decoration-thickness: var(--pl-link-text-decoration-thickness);
}
a:hover {
text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
}
<p class="pl-reset pl-typeset pl-margin-l">Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a href="#">aliquip ex ea commodo</a> consequat.</p>
When many links are presented together, the underline is optional. Removing it is common in navigation and list items where repeated underlines impede readability. Links should still underline on hover.
<style>
nav a {
text-decoration: none;
color: var(--pl-fg-default);
}
nav a:hover {
text-decoration: underline;
text-underline-offset: var(--pl-link-text-underline-offset);
text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
}
</style>
<nav class="pl-reset pl-typeset pl-margin-s pl-flex">
<a href="#" class="pl-padding-s">Lorem</a>
<a href="#" class="pl-padding-s">Ipsum</a>
<a href="#" class="pl-padding-s">Dolor</a>
<a href="#" class="pl-padding-s">Amet</a>
</nav>
New tabs disorient users, especially on mobile, and break the back button. Consider a new tab only when navigating away would lose the user's work, like linking to help from a form.
<a>: The Anchor element (MDN)