text-decoration-inset-023.html (1756B)
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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 9 10 <link rel="match" href="reference/text-decoration-inset-023-ref.html"> 11 12 <style> 13 body { 14 background: white; 15 color: black; 16 } 17 div.outer { 18 display: inline-block; 19 vertical-align: top; 20 font: 10px/2 Ahem; 21 position: relative; 22 width: 12ch; 23 height: 12ch; 24 border: 1px solid gray; 25 margin: 1em; 26 } 27 div.inner { 28 position: absolute; 29 text-decoration: underline; 30 text-decoration-inset: 2ch -2ch; 31 text-underline-offset: 3px; 32 text-decoration-thickness: 2px; 33 padding: 1ch; 34 box-decoration-break: clone; 35 } 36 div.inner > p { 37 margin: 2ch; 38 text-indent: 3ch hanging; 39 } 40 p:dir(rtl) { 41 unicode-bidi: bidi-override; 42 } 43 </style> 44 45 <p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case, 46 applied separately to each line:</p> 47 48 <div class=outer> 49 <div class=inner> 50 <p>foo a b c bar</p> 51 </div> 52 </div> 53 54 <div class=outer dir=rtl> 55 <div class=inner> 56 <p>foo a b c bar</p> 57 </div> 58 </div> 59 60 <br> 61 62 <div class=outer style="writing-mode: sideways-rl"> 63 <div class=inner> 64 <p>foo a b c bar</p> 65 </div> 66 </div> 67 68 <div class=outer dir=rtl style="writing-mode: sideways-rl"> 69 <div class=inner> 70 <p>foo a b c bar</p> 71 </div> 72 </div> 73 74 <br> 75 76 <div class=outer style="writing-mode: sideways-lr"> 77 <div class=inner> 78 <p>foo a b c bar</p> 79 </div> 80 </div> 81 82 <div class=outer dir=rtl style="writing-mode: sideways-lr"> 83 <div class=inner> 84 <p>foo a b c bar</p> 85 </div> 86 </div>