<head>
<style>
div {
    display: inline-block;
    clip-path: inset(0px 1px 0px 0px); /* workaround for mac. See webkit.org/b/237816. */
    font-family: monospace;
    font-size: 18px;
    text-decoration: underline;
    text-decoration-color: lightgreen;
    text-decoration-thickness: 1ex;
    text-underline-offset: -1.25ex;
    text-decoration-skip-ink: none;
    text-decoration-skip: none;
}
</style>
</head>
<div><span style="color: red;">Hello</span> I have a cool underline</div>