marker-text-emphasis.html (1829B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>::marker supports 'text-emphasis'</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="help" href="https://drafts.csswg.org/css-text-decor-4/#emphasis-marks"> 7 <link rel="match" href="marker-text-emphasis-ref.html"> 8 <meta name="assert" content="Checks that ::marker supports 'text-emphasis', both explicitly set or inherited from an ancestor"> 9 <style> 10 ol { 11 float: left; 12 width: 50px; 13 list-style-position: inside; 14 line-height: 2; 15 } 16 .text-emphasis-shorthand.explicit ::marker, 17 .text-emphasis-shorthand.inherit { 18 -webkit-text-emphasis: circle green; 19 text-emphasis: circle green; 20 } 21 .text-emphasis-longhands.explicit ::marker, 22 .text-emphasis-longhands.inherit { 23 -webkit-text-emphasis-style: circle; 24 -webkit-text-emphasis-color: green; 25 -webkit-text-emphasis-position: under right; 26 text-emphasis-style: circle; 27 text-emphasis-color: green; 28 text-emphasis-position: under right; 29 } 30 .marker-decimal { 31 list-style-type: decimal; 32 } 33 .marker-string { 34 list-style-type: "2. "; 35 } 36 .marker-content::marker { 37 content: "3. "; 38 } 39 </style> 40 <ol class="text-emphasis-shorthand explicit"> 41 <li class="marker-decimal"></li> 42 <li class="marker-string"></li> 43 <li class="marker-content"></li> 44 </ol> 45 <ol class="text-emphasis-shorthand inherit"> 46 <li class="marker-decimal"></li> 47 <li class="marker-string"></li> 48 <li class="marker-content"></li> 49 </ol> 50 <ol class="text-emphasis-longhands explicit"> 51 <li class="marker-decimal"></li> 52 <li class="marker-string"></li> 53 <li class="marker-content"></li> 54 </ol> 55 <ol class="text-emphasis-longhands inherit"> 56 <li class="marker-decimal"></li> 57 <li class="marker-string"></li> 58 <li class="marker-content"></li> 59 </ol>