disclosure-styles-ref.html (1765B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Reference: symbols function, invalid</title> 4 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> 5 <style type="text/css"> 6 @counter-style triangle-right { 7 system: cyclic; 8 symbols: \25b8; 9 suffix: ' '; 10 } 11 @counter-style triangle-left { 12 system: cyclic; 13 symbols: \25c2; 14 suffix: ' '; 15 } 16 @counter-style triangle-down { 17 system: cyclic; 18 symbols: \25be; 19 suffix: ' '; 20 } 21 @counter-style triangle-up { 22 system: cyclic; 23 symbols: \25b4; 24 suffix: ' '; 25 } 26 27 ul { 28 padding: 0; 29 list-style-position: inside; 30 } 31 32 .t-u { list-style-type: triangle-up; } 33 .t-d { list-style-type: triangle-down; } 34 .t-r { list-style-type: triangle-right; } 35 .t-l { list-style-type: triangle-left; } 36 div { font: 16px system-ui; margin: 1em; border: 1px solid gray; } 37 li::marker { font-family: inherit; } 38 </style> 39 40 <div style="width: 10em;"> 41 <ul dir="ltr"> 42 <li class="t-r">closed ltr 43 <li class="t-d">open ltr 44 </ul> 45 <ul dir="rtl"> 46 <li class="t-l">closed rtl 47 <li class="t-d">open rtl 48 </ul> 49 <p dir="ltr">▸ closed ltr 50 <p dir="rtl">◂ closed rtl 51 </div> 52 <div style="writing-mode: vertical-lr; height: 10em;"> 53 <ul dir="ltr"> 54 <li class="t-d">closed ltr 55 <li class="t-r">open ltr 56 </ul> 57 <ul dir="rtl"> 58 <li class="t-u">closed rtl 59 <li class="t-r">open rtl 60 </ul> 61 <p dir="ltr">▾ closed ltr 62 <p dir="rtl">▴ closed rtl 63 </div> 64 <div style="writing-mode: vertical-rl; height: 10em;"> 65 <ul dir="ltr"> 66 <li class="t-d">closed ltr 67 <li class="t-l">open ltr 68 </ul> 69 <ul dir="rtl"> 70 <li class="t-u">closed rtl 71 <li class="t-l">open rtl 72 </ul> 73 <p dir="ltr">▾ closed ltr 74 <p dir="rtl">▴ closed rtl 75 </div>