How to style links and lists
Keep links recognizable
Color and underlines make links distinguishable from surrounding text. Change decoration thoughtfully rather than removing it globally.
a {
color: #075985;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.18em;
}Style interaction states
Define keyboard focus as clearly as hover, and include the visited state when it helps readers.
a:hover { text-decoration-thickness: 0.2em; }
a:focus-visible { outline: 3px solid #f59e0b; }
a:visited { color: #6b21a8; }Control list markers
Lists can keep their semantics while using custom marker appearance.
ul.features { padding-inline-start: 1.4rem; }
ul.features li::marker { color: seagreen; }
ol.steps { list-style-type: decimal-leading-zero; }Build navigation lists
Navigation often uses a semantic list with visual spacing supplied by CSS.
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
padding: 0;
}