Example of use text-underline-offset negative

text-underline-offset-negative.css

/**
* Title: text-underline-offset with negative value
* Preview: https://codepen.io/RodrigoTomeES/pen/RwQWwML
* More info:
*  - https://github.com/w3c/csswg-drafts/issues/4059
*  - https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink
*  - https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip
*/

a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.2rem;
  text-underline-offset: -.2em;
  text-decoration-color: #8cb4ff;
  text-decoration-skip-ink: none; /* works in Firefox & Chrome, not in Safari */
  text-decoration-skip: none; /* works in Safari, not in Firefox & Chrome */
}