bar-pseudo-element-rtl-ref.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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: 0px 10px 0px 0px; padding: 0px; }
  6. body > div:nth-child(2) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
  7. body > div:nth-child(3) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
  8. body > div:nth-child(4) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
  9. /* 15 - 18 should have 100% width, no need to specify. */
  10. </style>
  11. <body dir='rtl'>
  12. <div class="meter-element">
  13. <div class="meter-bar">
  14. </div>
  15. </div>
  16. <div class="meter-element">
  17. <div class="meter-bar">
  18. </div>
  19. </div>
  20. <div class="meter-element">
  21. <div class="meter-bar">
  22. </div>
  23. </div>
  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. </body>
  45. </html>