marker-content-018.html (1592B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::marker pseudo elements styled with 'content' property</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="match" href="marker-content-018-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 7 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules"> 8 <meta name="assert" content="Checks that the 'content' property of a ::marker doesn't affect white space."> 9 <style> 10 ol { 11 float: left; 12 width: 100px; 13 } 14 .inside { 15 list-style-position: inside; 16 } 17 li:nth-child(1)::marker { content: "1" } 18 li:nth-child(2)::marker { content: "1 " } 19 li:nth-child(3)::marker { content: "1 " } 20 li:nth-child(4)::marker { content: " 1" } 21 li:nth-child(5)::marker { content: " 1" } 22 li:nth-child(6)::marker { content: " 1 " } 23 li:nth-child(7)::marker { content: "1\9 2" } 24 li:nth-child(8)::marker { content: "1\a 2" } 25 </style> 26 <ol class="inside"> 27 <li>item</li> 28 <li>item</li> 29 <li>item</li> 30 <li>item</li> 31 <li>item</li> 32 <li>item</li> 33 <li>item</li> 34 <li>item</li> 35 </ol> 36 <ol class="inside"> 37 <li> item</li> 38 <li> item</li> 39 <li> item</li> 40 <li> item</li> 41 <li> item</li> 42 <li> item</li> 43 <li> item</li> 44 <li> item</li> 45 </ol> 46 <ol class="outside"> 47 <li>item</li> 48 <li>item</li> 49 <li>item</li> 50 <li>item</li> 51 <li>item</li> 52 <li>item</li> 53 <li>item</li> 54 <li>item</li> 55 </ol> 56 <ol class="outside"> 57 <li> item</li> 58 <li> item</li> 59 <li> item</li> 60 <li> item</li> 61 <li> item</li> 62 <li> item</li> 63 <li> item</li> 64 <li> item</li> 65 </ol>