1426042-1-ref.html (1311B)
1 <!DOCTYPE html> 2 <html dir="rtl" lang="ar"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <meta charset="utf-8"> 6 <style> 7 html[dir="rtl"] { 8 direction: rtl; 9 } 10 .outer { 11 border: 1px solid blue; 12 margin: 1em; 13 padding: 5px 0; 14 clear: left; 15 float: left; 16 } 17 .before { 18 margin-left: 20px; 19 border: 5px solid green; 20 } 21 .after { 22 margin-right: 20px; 23 border: 5px solid red; 24 } 25 .test1::before { 26 content: ""; 27 margin-left: 20px; 28 border: 5px solid green; 29 } 30 .test1::after { 31 content: ""; 32 margin-right: 20px; 33 border: 5px solid red; 34 } 35 .test2::before { 36 content: "\200b"; 37 margin-left: 20px; 38 border: 5px solid green; 39 } 40 .test2::after { 41 content: "\200b"; 42 margin-right: 20px; 43 border: 5px solid red; 44 } 45 </style> 46 </head> 47 <body> 48 <div dir="ltr"> 49 The text in all three boxes should be centered, with a green bar to the far right and a red bar to the far left: 50 </div> 51 <div class="outer"> 52 <div><span class="before"></span><span>السلام عليكم</span><span class="after"></span></div> 53 </div> 54 <div class="outer"> 55 <div><span class="before"></span><span>السلام عليكم</span><span class="after"></span></div> 56 </div> 57 <div class="outer"> 58 <div><span class="before"></span><span>السلام عليكم</span><span class="after"></span></div> 59 </div> 60 </body> 61 </html>