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