text-underline-offset-002-ref.html (921B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Reference case for text-underline-offset</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 #main{ 9 border-bottom: 1px solid cyan; 10 display: flex; 11 } 12 #text, #norm{ 13 text-decoration: green underline; 14 text-decoration-skip-ink: none; 15 text-underline-offset: 0px; 16 font: 20px/1 Ahem; 17 color: transparent; 18 position: relative; 19 top: 21px; 20 margin-right: 10px; 21 } 22 </style> 23 </head> 24 <body > 25 <p class="instructions">Test passes if the lines are at the same level</p> 26 <div id="main"> 27 <div> 28 <p>left<span id="text">XXXX</span></p> 29 </div> 30 <div> 31 <p><span id="norm">XXXX</span>right</p> 32 </div> 33 </div> 34 </body> 35 </html>