<!DOCTYPE html> <html lang="en-US"> <head> <title>text-decoration alignment</title> <meta charset=UTF-8> <style> span.block { position: absolute; top: 0; left: 0; } span.dec { text-decoration: underline } span.hide { color: transparent } </style> </head> <body> <p style="position: relative"> <span class="block" style="margin-top: 16px"><span class="hide"></span><span class="dec" style="color:black ">x<span class="hide">xx</span></span></span> <span class="block" style="margin-top: 08px"><span class="hide">x</span><span class="dec" style="color:fuchsia">x<span class="hide">x</span></span></span> <span class="block" style="margin-top: 00px"><span class="hide">xx</span><span class="dec" style="color:aqua ">x<span class="hide"></span></span></span> </p> </body> </html>