before-after-011.xht (1384B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: CSS table model and generated content: Basics</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/generated-content/001.xml" type="application/xhtml+xml"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content" /> 8 <link rel="match" href="before-after-011-ref.xht" /> 9 10 <style type="text/css"> 11 .table { display: table; border-spacing: 0; background: red; color: green; } 12 .row { display: table-row; } 13 .cell, .row.test:before, .row.test:after { display: table-cell; background: white; border: solid white; } 14 .row.test:before { content: "P"; } 15 .row.test:after { content: "S"; } 16 </style> 17 </head> 18 <body> 19 <p>Test passes if the word <strong>PASS appear twice</strong> and if there is no red.</p> 20 <div class="table"> 21 <div class="row"> 22 <div class="cell">P</div> 23 <div class="cell">A</div> 24 <div class="cell">S</div> 25 <div class="cell">S</div> 26 </div> 27 <div class="row test"> 28 <!--<div class="cell">P</div>--> 29 <div class="cell">A</div> 30 <div class="cell">S</div> 31 <!--<div class="cell">S</div>--> 32 </div> 33 </div> 34 </body> 35 </html>