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