complex-decoration-style-quirks.html (3283B)
1 <style type="text/css"> 2 p { 3 margin-left: 11px; 4 padding-left: 11px; 5 } 6 p.dotted span { 7 text-decoration-style: dotted; 8 } 9 p.dashed span { 10 text-decoration-style: dashed; 11 } 12 p.wavy span { 13 text-decoration-style: wavy; 14 } 15 span { 16 text-decoration: underline line-through overline; 17 } 18 p.relative span { 19 position: relative; 20 left: 13px; 21 } 22 23 p.relative2 > span { 24 position: relative; 25 left: 13px; 26 text-decoration: none; 27 } 28 29 p.relative2 span span { 30 position: relative; 31 left: -13px; 32 } 33 34 p.shadow { 35 color: transparent; 36 text-shadow: 1em 0.5em black; 37 } 38 </style> 39 <div style="font-size: 16px;"> 40 <p class="dotted"> 41 <span> </span><span> </span><span> </span><span> </span> 42 </p> 43 <p class="dashed"> 44 <span> </span><span> </span><span> </span><span> </span> 45 </p> 46 <p class="wavy"> 47 <span> </span><span> </span><span> </span><span> </span> 48 </p> 49 <p class="dotted relative"> 50 <span> </span><span> </span><span> </span><span> </span> 51 </p> 52 <p class="dashed relative"> 53 <span> </span><span> </span><span> </span><span> </span> 54 </p> 55 <p class="wavy relative"> 56 <span> </span><span> </span><span> </span><span> </span> 57 </p> 58 <p class="dotted relative2"> 59 <span><span> </span><span> </span><span> </span><span> </span></span> 60 </p> 61 <p class="dashed relative2"> 62 <span><span> </span><span> </span><span> </span><span> </span></span> 63 </p> 64 <p class="wavy relative2"> 65 <span><span> </span><span> </span><span> </span><span> </span></span> 66 </p> 67 <p class="dotted shadow"> 68 <span> </span><span> </span><span> </span><span> </span> 69 </p> 70 <p class="dashed shadow"> 71 <span> </span><span> </span><span> </span><span> </span> 72 </p> 73 <p class="wavy shadow"> 74 <span> </span><span> </span><span> </span><span> </span> 75 </p> 76 </div> 77 <div style="font-size: 32px;"> 78 <p class="dotted"> 79 <span> </span><span> </span><span> </span><span> </span> 80 </p> 81 <p class="dashed"> 82 <span> </span><span> </span><span> </span><span> </span> 83 </p> 84 <p class="wavy"> 85 <span> </span><span> </span><span> </span><span> </span> 86 </p> 87 <p class="dotted relative"> 88 <span> </span><span> </span><span> </span><span> </span> 89 </p> 90 <p class="dashed relative"> 91 <span> </span><span> </span><span> </span><span> </span> 92 </p> 93 <p class="wavy relative"> 94 <span> </span><span> </span><span> </span><span> </span> 95 </p> 96 <p class="dotted relative2"> 97 <span><span> </span><span> </span><span> </span><span> </span></span> 98 </p> 99 <p class="dashed relative2"> 100 <span><span> </span><span> </span><span> </span><span> </span></span> 101 </p> 102 <p class="wavy relative2"> 103 <span><span> </span><span> </span><span> </span><span> </span></span> 104 </p> 105 <p class="dotted shadow"> 106 <span> </span><span> </span><span> </span><span> </span> 107 </p> 108 <p class="dashed shadow"> 109 <span> </span><span> </span><span> </span><span> </span> 110 </p> 111 <p class="wavy shadow"> 112 <span> </span><span> </span><span> </span><span> </span> 113 </p> 114 </div>