|
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> |