disclosure-styles.html (1643B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Test: disclosure styles</title> 4 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> 5 <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#disclosure-open"> 6 <link rel="match" href="disclosure-styles-ref.html"> 7 <style type="text/css"> 8 @counter-style disclosure-closed2 { 9 system: extends disclosure-closed; 10 } 11 @counter-style disclosure-open2 { 12 system: extends disclosure-open; 13 } 14 ul { 15 padding: 0; 16 list-style-position: inside; 17 } 18 .closed { list-style-type: disclosure-closed2; } 19 .open { list-style-type: disclosure-open2; } 20 p::before { 21 content: counter(a, disclosure-closed) " "; 22 } 23 div { font: 16px system-ui; margin: 1em; border: 1px solid gray; } 24 ::marker { font-family: inherit; } 25 </style> 26 <div style="width: 10em"> 27 <ul dir="ltr"> 28 <li class="closed">closed ltr 29 <li class="open">open ltr 30 </ul> 31 <ul dir="rtl"> 32 <li class="closed">closed rtl 33 <li class="open">open rtl 34 </ul> 35 <p dir="ltr">closed ltr 36 <p dir="rtl">closed rtl 37 </div> 38 <div style="writing-mode: vertical-lr; height: 10em;"> 39 <ul dir="ltr"> 40 <li class="closed">closed ltr 41 <li class="open">open ltr 42 </ul> 43 <ul dir="rtl"> 44 <li class="closed">closed rtl 45 <li class="open">open rtl 46 </ul> 47 <p dir="ltr">closed ltr 48 <p dir="rtl">closed rtl 49 </div> 50 <div style="writing-mode: vertical-rl; height: 10em;"> 51 <ul dir="ltr"> 52 <li class="closed">closed ltr 53 <li class="open">open ltr 54 </ul> 55 <ul dir="rtl"> 56 <li class="closed">closed rtl 57 <li class="open">open rtl 58 </ul> 59 <p dir="ltr">closed ltr 60 <p dir="rtl">closed rtl 61 </div>