floated-01.html (1164B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS 2.1 Test Suite: generated content</title> 5 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/> 8 <meta name="flags" content="" /> 9 <style> 10 div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; } 11 12 div::before { 13 content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); 14 counter-increment:ctr; 15 } 16 div::after { 17 content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; 18 counter-increment:ctr; 19 } 20 21 .beforeleft::before { 22 float:left; 23 } 24 .beforeright::before { 25 float:right; 26 } 27 .afterleft::after { 28 float:left; 29 } 30 .afterright::after { 31 float:right; 32 } 33 34 div { border:1px solid green; margin:5px; } 35 div { overflow:auto; } 36 </style> 37 </head> 38 <body> 39 <div class="beforeleft afterleft">Inner</div> 40 <div class="beforeleft afterright">Inner</div> 41 <div class="beforeright afterleft">Inner</div> 42 <div class="beforeright afterright">Inner</div> 43 </body> 44 </html>