Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
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"; }
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 }
21 .abs::before {
22 position:absolute;
23 left:0;
24 }
25 .abs::after {
26 position:absolute;
27 right:0;
28 }
30 .rel::before {
31 position:relative;
32 top:-10px;
33 }
34 .rel::after {
35 position:relative;
36 top:10px;
37 }
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>