Así que profundicé en el modo mix-blend-mode y lo hice funcionar con el siguiente código:

html

 <!-- absolute helper is needed as position:absolute on underline elements themselves lead to underlines not breaking correctly --> <span class="absolute-helper"> <!-- is used for mix-blend-mode: difference --> <span class="underline underline--primary">Text</span> </span> <!-- on top of mix-blend-mode: difference there is another layer with underlin that has mix-blend-mode: screen (opposite of multiply) --> <span class="absolute-helper"> <span class="underline underline--secondary">Text</span> </span>

estilos

 .absolute-helper { position: absolute; top: 0; left: 0; width: 100%; } .underline { background-size: 1px 1em; display: inline; color: transparent; // hide font and just show the underlining &--primary { mix-blend-mode: difference; // shows the difference between the current and the underlying layer box-shadow: inset 0 -0.175em $white, inset 0 -0.2em #000; // the underline, color has to be white for this to work } &--secondary { mix-blend-mode: screen; // opposite of multiply box-shadow: inset 0 -0.175em #somecolor, inset 0 -0.2em #000; // the second underline layered on top } }

resultado:

Tal vez alguien encuentre esto útil.

¡Gracias por la ayuda!