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