content-counters-008.xht (1554B)
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: content: counters(c, ".", upper-roman)</title> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"/> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-content"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counter-styles"/> 9 <meta http-equiv="Content-Style-Type" content="text/css"/> 10 <style type="text/css"> 11 12 body { white-space: nowrap; } 13 14 15 body, #test span:first-child { counter-reset: c; } 16 p, #test span { counter-increment: c; } 17 #test span:before { content: counters(c, ".", upper-roman); } 18 19 </style> 20 </head> 21 <body> 22 23 <p>The following two lines should look the same:</p> 24 25 <div id="test"> 26 <span></span> 27 <span></span> 28 <span></span> 29 <span></span> 30 <span></span> 31 <span></span> 32 <span></span> 33 <span></span> 34 <span></span> 35 <span></span> 36 <span></span> 37 <span></span> 38 <span style="counter-reset: c 48"></span> 39 <span></span> 40 <span style="counter-reset: c 388"></span> 41 <span></span> 42 <span style="counter-reset: c 3488"></span> 43 <span></span> 44 <span></span> 45 </div> 46 47 <div> 48 I.I 49 I.II 50 I.III 51 I.IV 52 I.V 53 I.VI 54 I.VII 55 I.VIII 56 I.IX 57 I.X 58 I.XI 59 I.XII 60 I.XLIX 61 I.L 62 I.CCCLXXXIX 63 I.CCCXC 64 I.MMMCDLXXXIX 65 I.MMMCDXC 66 I.MMMCDXCI 67 </div> 68 69 </body> 70 </html>