before-after-floated-001

generated content

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html><head>
 3     <link rel="reference" href="before-after-floated-001-ref.xht">
 4     <title>CSS Test: 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 type="text/css">
10 div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; }
11 
12 div:before {
13   content:counter(ctr) url(support/square-outline-32x32.png) open-quote "Before " attr(class);
14   counter-increment:ctr;
15 }
16 div:after {
17   content:counter(ctr) url(support/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 
44 
45 </body></html>