text-decoration-inset-008.html (866B)
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-008-ref.html"> 10 11 <style> 12 body { 13 background: white; 14 color: black; 15 font-family: times new roman, serif; 16 } 17 div { 18 position: relative; 19 } 20 h1 { 21 position: absolute; 22 } 23 span { 24 display: inline-block; 25 position: relative; 26 } 27 u { 28 text-decoration-skip-ink: none; 29 text-decoration-color: black; 30 text-decoration-inset: 10px; 31 } 32 </style> 33 34 <p>The underline for "quick براؤن" should be trimmed by 10px at each end, and not interrupted at the direction boundary:</p> 35 36 <div> 37 <h1> 38 the <u>quick براؤن</u> fox 39 </h1> 40 </div>