positioned-01.html (1267B)
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 .gen::before { 13 content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class); 14 counter-increment:ctr; 15 } 16 .gen::after { 17 content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote; 18 counter-increment:ctr; 19 } 20 21 .abs::before { 22 position:absolute; 23 left:0; 24 } 25 .abs::after { 26 position:absolute; 27 right:0; 28 } 29 30 .rel::before { 31 position:relative; 32 top:-10px; 33 } 34 .rel::after { 35 position:relative; 36 top:10px; 37 } 38 39 div { border:1px solid green; margin:5px; height:100px; } 40 </style> 41 </head> 42 <div class="gen abs">Inner</div> 43 <!-- an element should be the containing block for its positioned content --> 44 <div style="position:relative;" class="gen abs">Inner</div> 45 <div class="gen rel">Inner</div> 46 <div>Begin <span class="gen rel">Inner</span> End</div> 47 </body> 48 </html>