⚓️ Better link underlines

Note date 21 Jan, 2023
Tags css
👋 FYI, this note is over 6 months old. Some of the content may be out of date. 
a {
  &:link,
  &:visited {
    color: red;
    text-decoration: none;
    border-bottom: 2px solid currentColor;

    @supports (text-decoration-thickness: 2px) {
      text-decoration-style: solid;
      text-decoration-line: underline;
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      text-decoration-skip: ink;
      border: 0;
    }
  }
}

Browser support

← Back home