marker-content-012.html (2347B)
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-012-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-lists/#content-property"> 8 <meta name="assert" content="Checks that ::marker's 'content' takes precendence over 'list-style-type' and 'list-style-image'"> 9 <style> 10 :root { 11 --red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>'); 12 --green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>'); 13 } 14 ul { 15 float: left; 16 } 17 .inside { 18 list-style-position: inside; 19 } 20 .text::marker { 21 content: "text"; 22 } 23 .image::marker { 24 content: var(--green-image); 25 } 26 </style> 27 <ul style="list-style-type: none"> 28 <li class="outside normal">item</li> 29 <li class="outside text">item</li> 30 <li class="outside image">item</li> 31 <li class="inside normal">item</li> 32 <li class="inside text">item</li> 33 <li class="inside image">item</li> 34 </ul> 35 <ul style="list-style-type: decimal"> 36 <li class="outside normal">item</li> 37 <li class="outside text">item</li> 38 <li class="outside image">item</li> 39 <li class="inside normal">item</li> 40 <li class="inside text">item</li> 41 <li class="inside image">item</li> 42 </ul> 43 <ul style="list-style-type: disc"> 44 <li class="outside normal">item</li> 45 <li class="outside text">item</li> 46 <li class="outside image">item</li> 47 <li class="inside normal">item</li> 48 <li class="inside text">item</li> 49 <li class="inside image">item</li> 50 </ul> 51 <ul style="list-style-type: 'string'"> 52 <li class="outside normal">item</li> 53 <li class="outside text">item</li> 54 <li class="outside image">item</li> 55 <li class="inside normal">item</li> 56 <li class="inside text">item</li> 57 <li class="inside image">item</li> 58 </ul> 59 <ul style="list-style-image: var(--red-image)"> 60 <li class="outside normal">item</li> 61 <li class="outside text">item</li> 62 <li class="outside image">item</li> 63 <li class="inside normal">item</li> 64 <li class="inside text">item</li> 65 <li class="inside image">item</li> 66 </ul>