Til

CSS: text-decoration values

Posted:

In CSS text-decorationhas some values that you can adjust to get your links look nicer and you do not have to have use borderor paddinglike I did for way too long.

MDN has a list of the values if you want to dive deeper.

I found out about it after seeing the look on Manuel Moreales page. Opening web inspector made me find out how easy it is to create a different look for a link and it does not need any crazy CSS markup:

a {
  text-decoration: underline;
  text-decoration-color: var(--c-link);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.5rem;
  text-underline-offset: -0.25rem;
}