Default style
It has a .1px dotted underline with --accent-color.
On hover, the underline becomes solid.
On focus, the underline is black.
Linked title
Linked titles only show underline on hover.
Use .title class.
Link styles
Since links are often nested inside a class you want to target variables can be used to override styles on nested elements.
Variables
Link styles are set with variables.
This lets you set the variable on an element so it applies to every child link.
a
a {
color: var(--link-color);
font-size: var(--link-font-size);
font-style: var(--link-font-style);
text-decoration-style: var(--link-text-decoration-style);
text-decoration-color: var(--link-text-decoration-color);
text-decoration-line: var(--link-text-decoration-line);
text-decoration-thickness: var(--link-text-decoration-thickness);
}a:focus, a:hover, a:active, a:visited
a:focus {
text-decoration-style: var(--link-focus-text-decoration-style);
text-decoration-color: var(--link-focus-text-decoration-color);
text-decoration-line: var(--link-focus-text-decoration-line);
text-decoration-thickness: var(--link-focus-text-decoration-thickness);
outline-style: var(--link-focus-outline-style);
outline-width: var(--link-focus-outline-width);
outline-offset: var(--link-focus-outline-offset);
}
a:hover {
text-decoration-style: var(--link-hover-text-decoration-style);
text-decoration-color: var(--link-hover-text-decoration-color);
text-decoration-line: var(--link-hover-text-decoration-line);
text-decoration-thickness: var(--link-hover-text-decoration-thickness);
}
a:active {
color: var(--link-active-color);
text-decoration-thickness: var(--link-active-text-decoration-thickness);
}
a:visited {
color: var(--link-visited-color);
}