bar-pseudo-element-ref.html (3189B)
1 <!DOCTYPE html> 2 <html> 3 <link rel='stylesheet' type='text/css' href='style.css'> 4 <style> 5 body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; } 6 body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; } 7 body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; } 8 body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; } 9 body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; } 10 body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; } 11 body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } 12 body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } 13 body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } 14 body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } 15 body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } 16 body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } 17 body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } 18 body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } 19 body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; } 20 body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; } 21 /* 15 - 18 should have 100% width, no need to specify. */ 22 </style> 23 <body> 24 <div class="meter-element"> 25 <div class="meter-bar"> 26 </div> 27 </div> 28 <div class="meter-element"> 29 <div class="meter-bar"> 30 </div> 31 </div> 32 <div class="meter-element"> 33 <div class="meter-bar"> 34 </div> 35 </div> 36 <div class="meter-element"> 37 <div class="meter-bar"> 38 </div> 39 </div> 40 <div class="meter-element"> 41 <div class="meter-bar"> 42 </div> 43 </div> 44 <div class="meter-element"> 45 <div class="meter-bar"> 46 </div> 47 </div> 48 <div class="meter-element"> 49 <div class="meter-bar"> 50 </div> 51 </div> 52 <div class="meter-element"> 53 <div class="meter-bar"> 54 </div> 55 </div> 56 <div class="meter-element"> 57 <div class="meter-bar"> 58 </div> 59 </div> 60 <div class="meter-element"> 61 <div class="meter-bar"> 62 </div> 63 </div> 64 <div class="meter-element"> 65 <div class="meter-bar"> 66 </div> 67 </div> 68 <div class="meter-element"> 69 <div class="meter-bar"> 70 </div> 71 </div> 72 <div class="meter-element"> 73 <div class="meter-bar"> 74 </div> 75 </div> 76 <div class="meter-element"> 77 <div class="meter-bar"> 78 </div> 79 </div> 80 <div class="meter-element"> 81 <div class="meter-bar"> 82 </div> 83 </div> 84 <div class="meter-element"> 85 <div class="meter-bar"> 86 </div> 87 </div> 88 <div class="meter-element"> 89 <div class="meter-bar"> 90 </div> 91 </div> 92 <div class="meter-element"> 93 <div class="meter-bar"> 94 </div> 95 </div> 96 <div class="meter-element"> 97 <div class="meter-bar"> 98 </div> 99 </div> 100 <div class="meter-element"> 101 <div class="meter-bar"> 102 </div> 103 </div> 104 </body> 105 </html>