Custom underline with CSS

It is possible to style the underline of an <a> tag in CSS without resorting to workarounds. In the past I used the well-known method of hiding the default underline and adding an absolutely positioned pseudo-element ::before with a custom underline.

Apparently for quite a while now, CSS offers several properties to customise the appearance of the underline:

a {
  text-decoration-line: underline;
  text-decoration-color: #ff00ff;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 4px;
}

Or a combination of some of them could be used in the text-decoration shorthand property

a {
  text-decoration: underline #ff00ff 1px;
}

See MDN for more details about the text-decoration and text-underline-offset properties