text-decoration-inset-022.html (1692B)
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-022-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 } 35 div.inner > p { 36 margin: 2ch; 37 text-indent: 3ch hanging; 38 } 39 p:dir(rtl) { 40 unicode-bidi: bidi-override; 41 } 42 </style> 43 44 <p>The text "foo a b c bar" should have an underline that is offset 2ch forward in each case:</p> 45 46 <div class=outer> 47 <div class=inner> 48 <p>foo a b c bar</p> 49 </div> 50 </div> 51 52 <div class=outer dir=rtl> 53 <div class=inner> 54 <p>foo a b c bar</p> 55 </div> 56 </div> 57 58 <br> 59 60 <div class=outer style="writing-mode: sideways-rl"> 61 <div class=inner> 62 <p>foo a b c bar</p> 63 </div> 64 </div> 65 66 <div class=outer dir=rtl style="writing-mode: sideways-rl"> 67 <div class=inner> 68 <p>foo a b c bar</p> 69 </div> 70 </div> 71 72 <br> 73 74 <div class=outer style="writing-mode: sideways-lr"> 75 <div class=inner> 76 <p>foo a b c bar</p> 77 </div> 78 </div> 79 80 <div class=outer dir=rtl style="writing-mode: sideways-lr"> 81 <div class=inner> 82 <p>foo a b c bar</p> 83 </div> 84 </div>