marker-font-variant-numeric-default.html (2903B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker has 'font-variant-numeric: tabular-nums' by default</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-default-ref.html"> 7 <meta name="assert" content="Checks that the markers have the same width thanks to 'font-variant-numeric: tabular-nums', and thus the black boxes are perfectly aligned"> 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 </style> 54 <ol class="decimal"> 55 <li><span>X</span></li> 56 <li><span>X</span></li> 57 <li><span>X</span></li> 58 <li><span>X</span></li> 59 <li><span>X</span></li> 60 <li><span>X</span></li> 61 <li><span>X</span></li> 62 <li><span>X</span></li> 63 <li><span>X</span></li> 64 </ol> 65 <ol class="string"> 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="marker"> 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="before"> 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="after"> 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>