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