marker-font-variant-numeric-normal.html (3212B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker accepts 'font-variant-numeric: normal'</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 6 <link rel="match" href="marker-font-variant-numeric-normal-ref.html"> 7 <meta name="assert" content="Checks that the marker default 'font-variant-numeric: tabular-nums' can be overridden with 'font-variant-numeric: normal'"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 @font-face { 11 /* This font looks different with 'font-variant-numeric: tabular-nums' */ 12 font-family: 'Exo 2'; 13 src: local('Exo 2'), 14 url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); 15 } 16 ol { 17 float: left; 18 width: 50px; 19 line-height: 25px; 20 list-style-position: inside; 21 font-family: "Exo 2"; 22 } 23 span { 24 display: inline-block; 25 font: 25px/1 Ahem; 26 vertical-align: top; 27 } 28 29 li:nth-child(1) { --marker: "1. " } 30 li:nth-child(2) { --marker: "2. " } 31 li:nth-child(3) { --marker: "3. " } 32 li:nth-child(4) { --marker: "4. " } 33 li:nth-child(5) { --marker: "5. " } 34 li:nth-child(6) { --marker: "6. " } 35 li:nth-child(7) { --marker: "7. " } 36 li:nth-child(8) { --marker: "8. " } 37 li:nth-child(9) { --marker: "9. " } 38 39 .string > li { 40 list-style-type: var(--marker); 41 } 42 .marker > li::marker { 43 content: var(--marker); 44 } 45 .before > li, .after > li { 46 display: block; 47 } 48 .before > li::before, .after > li::after { 49 content: "\200B"; /* zero-width space */ 50 display: list-item; 51 float: left; 52 } 53 54 ::marker { 55 font-variant-numeric: normal; 56 } 57 58 /* Sume browsers support ::marker but not ::before::marker or ::after::marker. 59 Therefore, this is only enforced if the browser supports the selector, 60 otherwise, the reference will expect the default `tabular-nums` */ 61 ::before::marker, ::after::marker { 62 font-variant-numeric: normal; 63 } 64 </style> 65 <ol class="decimal"> 66 <li><span>X</span></li> 67 <li><span>X</span></li> 68 <li><span>X</span></li> 69 <li><span>X</span></li> 70 <li><span>X</span></li> 71 <li><span>X</span></li> 72 <li><span>X</span></li> 73 <li><span>X</span></li> 74 <li><span>X</span></li> 75 </ol> 76 <ol class="string"> 77 <li><span>X</span></li> 78 <li><span>X</span></li> 79 <li><span>X</span></li> 80 <li><span>X</span></li> 81 <li><span>X</span></li> 82 <li><span>X</span></li> 83 <li><span>X</span></li> 84 <li><span>X</span></li> 85 <li><span>X</span></li> 86 </ol> 87 <ol class="marker"> 88 <li><span>X</span></li> 89 <li><span>X</span></li> 90 <li><span>X</span></li> 91 <li><span>X</span></li> 92 <li><span>X</span></li> 93 <li><span>X</span></li> 94 <li><span>X</span></li> 95 <li><span>X</span></li> 96 <li><span>X</span></li> 97 </ol> 98 <ol class="before"> 99 <li><span>X</span></li> 100 <li><span>X</span></li> 101 <li><span>X</span></li> 102 <li><span>X</span></li> 103 <li><span>X</span></li> 104 <li><span>X</span></li> 105 <li><span>X</span></li> 106 <li><span>X</span></li> 107 <li><span>X</span></li> 108 </ol> 109 <ol class="after"> 110 <li><span>X</span></li> 111 <li><span>X</span></li> 112 <li><span>X</span></li> 113 <li><span>X</span></li> 114 <li><span>X</span></li> 115 <li><span>X</span></li> 116 <li><span>X</span></li> 117 <li><span>X</span></li> 118 <li><span>X</span></li> 119 </ol>