marker-content-012-ref.html (2201B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <style> 7 :root { 8 --red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>'); 9 --green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>'); 10 } 11 ul { 12 float: left; 13 } 14 .inside { 15 list-style-position: inside; 16 } 17 .text, .image { 18 list-style-type: none; 19 list-style-image: none; 20 } 21 .outside.text::before, .outside.image::before { 22 display: inline-block; 23 direction: rtl; 24 width: 0; 25 } 26 .text::before { 27 content: "text"; 28 } 29 .image::before { 30 content: var(--green-image); 31 } 32 </style> 33 <ul style="list-style-type: none"> 34 <li class="outside normal">item</li> 35 <li class="outside text">item</li> 36 <li class="outside image">item</li> 37 <li class="inside normal">item</li> 38 <li class="inside text">item</li> 39 <li class="inside image">item</li> 40 </ul> 41 <ul style="list-style-type: decimal"> 42 <li class="outside normal">item</li> 43 <li class="outside text">item</li> 44 <li class="outside image">item</li> 45 <li class="inside normal">item</li> 46 <li class="inside text">item</li> 47 <li class="inside image">item</li> 48 </ul> 49 <ul style="list-style-type: disc"> 50 <li class="outside normal">item</li> 51 <li class="outside text">item</li> 52 <li class="outside image">item</li> 53 <li class="inside normal">item</li> 54 <li class="inside text">item</li> 55 <li class="inside image">item</li> 56 </ul> 57 <ul style="list-style-type: 'string'"> 58 <li class="outside normal">item</li> 59 <li class="outside text">item</li> 60 <li class="outside image">item</li> 61 <li class="inside normal">item</li> 62 <li class="inside text">item</li> 63 <li class="inside image">item</li> 64 </ul> 65 <ul style="list-style-image: var(--red-image)"> 66 <li class="outside normal">item</li> 67 <li class="outside text">item</li> 68 <li class="outside image">item</li> 69 <li class="inside normal">item</li> 70 <li class="inside text">item</li> 71 <li class="inside image">item</li> 72 </ul>