text-decoration-inset-011.html (1187B)
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-011-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 margin-left: 10px; 20 } 21 h1 { 22 position: absolute; 23 line-height: 2; 24 width: 10em; 25 } 26 u.a { 27 text-decoration-color: blue; 28 text-underline-offset: 20px; 29 text-decoration-inset: 10px; 30 } 31 u.b { 32 text-decoration-color: green; 33 text-underline-offset: 20px; 34 text-decoration-inset: 10px -10px; 35 } 36 </style> 37 38 <p>The underline of the first phrase should be trimmed by 10px at both ends; 39 the underline of the second should be offset by 10px to the left at both start and end:</p> 40 41 <div lang="ar"> 42 <h1 dir="rtl"> 43 <u class="a">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت</u> —<br> <u class="b">يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ</u> 44 </h1> 45 </div>