text-decoration-inset-009.html (907B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Text Decoration 4: text-decoration-inset</title> 5 6 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property"> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 9 <link rel="match" href="reference/text-decoration-inset-009-ref.html"> 10 11 <style> 12 body { 13 background: white; 14 color: black; 15 } 16 div { 17 position: relative; 18 } 19 h1 { 20 position: absolute; 21 } 22 u { 23 text-decoration-color: black; 24 text-decoration-inset: 0.25em; 25 } 26 u.green { 27 text-decoration-color: green; 28 text-underline-offset: 10px; 29 text-decoration-inset: -0.5em; 30 } 31 </style> 32 33 <p>The underline for "ultra-quick brown" should be trimmed by .25em at each end; 34 the additional green underline for "quick" should be extended by .5em at each end:</p> 35 36 <div> 37 <h1> 38 the <u>ultra-<u class="green">quick</u> brown</u> fox 39 </h1> 40 </div>