Underline text below the text in CSS

Context: we want to underline a text below the text.

Modern CSS properties will help us:

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 5px;
text-underline-offset: -5px;
text-decoration-color: #ffcc00;
text-decoration-skip-ink: none; /* works in Firefox & Chrome, but not Safari */ text-decoration-skip: none; / works in Safari, but not Chrome and Firefox */

Result:

Explanations:

text-decoration-line: underline;
=> we ask for the text to be underlined

text-decoration-style: solid;
=> the decoration style will be solid (a uniform line)

text-decoration-thickness: 5px;
=> line thickness: 5px;

text-underline-offset: -5px;
=> line offset: 5px negative (upward)

text-decoration-color: #ffcc00;
=> line color

text-decoration-skip-ink: none; /* works in Firefox & Chrome, but not Safari */
text-decoration-skip: none; / works in Safari, but not Chrome and Firefox */

=> these 2 lines make it work across the different browsers