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