before-after-011

CSS table model and generated content: Basics

WeasyPrint

This browser

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 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   <style type="text/css">
 9    .table { display: table; border-spacing: 0; background: red; color: green; }
10    .row { display: table-row; }
11    .cell, .row.test:before, .row.test:after { display: table-cell; background: white; border: solid white; }
12    .row.test:before { content: "P"; }
13    .row.test:after { content: "S"; }
14   </style>
15  </head>
16  <body>
17   <p>There word PASS should appear twice below, and there should be no red.</p>
18   <div class="table">
19     <div class="row">
20      <div class="cell">P</div>
21      <div class="cell">A</div>
22      <div class="cell">S</div>
23      <div class="cell">S</div>
24     </div>
25     <div class="row test">
26      <!--<div class="cell">P</div>-->
27      <div class="cell">A</div>
28      <div class="cell">S</div>
29      <!--<div class="cell">S</div>-->
30     </div>
31   </div>
32  </body>
33 </html>