after-content-display-003

:after generated content - display list-item

WeasyPrint

This browser

Assertion
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 
 4  <head>
 5 
 6   <title>CSS Test: :after generated content - display list-item</title>
 7 
 8   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 9   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
10   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop">
11   <link rel="help" href="http://www.w3.org/TR/html4/struct/lists.html#h-10.3.1">
12   <meta content="" name="flags">
13   <meta content="Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element." name="assert">
14 
15   <style type="text/css">
16   div:after
17   {
18   content: "Filler text";
19   display: list-item;
20   margin-left: 1em;
21   }
22   </style>
23 
24  </head>
25 
26  <body>
27 
28   <p>Test passes if there are <strong>2 lines of "Filler text"</strong>. The 2nd line should be preceded with a bullet list-marker (a "disc" as a small filled-in circle).</p>
29 
30   <div>Filler text</div>
31 
32  </body>
33 </html>