Skip to content

Instantly share code, notes, and snippets.

@tranchausky
Created December 31, 2023 05:18
Show Gist options
  • Save tranchausky/36dbd1c7189ab4233b732cb99f8e5873 to your computer and use it in GitHub Desktop.
Save tranchausky/36dbd1c7189ab4233b732cb99f8e5873 to your computer and use it in GitHub Desktop.
<ul id="example-element" class="transition-all unhighlighted" style="list-style-type: space-counter;">
<li>Apollo</li>
<li>Hubble</li>
<li>Chandra</li>
<li>Cassini-Huygens</li>
</ul>
<ul id="example-element" class="transition-all unhighlighted" style="list-style-type: space-counter-view;">
<li>Chandra1</li>
<li>Chandra2</li>
<li>Chandra3</li>
<li>Chandra4</li>
<li>Chandra5</li>
<li>Chandra6</li>
<li>Chandra7</li>
<li>Chandra8</li>
<li>Chandra9</li>
<li>Chandra10</li>
<li>Chandra11</li>
<li>Chandra12</li>
<li>Chandra13</li>
<li>Chandra14</li>
<li>Chandra15</li>
<li>Chandra16</li>
<li>Chandra17</li>
<li>Chandra18</li>
<li>Chandra19</li>
<li>Chandra20</li>
<li>Chandra20</li>
<li>Chandra21</li>
<li>Chandra22</li>
<li>Chandra23</li>
<li>Chandra24</li>
<li>Chandra25</li>
<li>Chandra26</li>
<li>Chandra27</li>
<li>Chandra28</li>
<li>Chandra29</li>
<li>Chandra30</li>
<li>Chandra31</li>
<li>Chandra32</li>
<li>Chandra33</li>
<li>Chandra34</li>
<li>Chandra35</li>
<li>Chandra36</li>
<li>Chandra37</li>
<li>Chandra38</li>
<li>Chandra39</li>
<li>Chandra40</li>
</ul>
<style>
#example-element {
width: 100%;
background: #be094b;
color: #fff;
}
@counter-style space-counter {
symbols: "\1F680""\1F6F8""\1F6F0""\1F52D";
suffix: " ";
}
@counter-style space-counter-view {
//symbols: "\1F680""\1F6F8""\1F6F0""\1F52D";
symbols: "\1F698""\1F699""\1F69A""\1F696""\1F683"
"\1F681""\1F682""\1F683""\1F696""\1F698"
"\1F686""\1F687""\1F697""\1F689""\1F690"
"\1F680""\1F684""\1F685""\1F688""\1F6F8"
"\1F68A""\1F68B""\1F68C""\1F68D""\1F68E"
"\1F68F""\1F69B""\1F69C""\1F69D""\1F69E"
"\1F69F""\1F6A0""\1F6A1""\1F6A2""\1F6A3"
"\1F6A4""\1F698""\1F698""\1F698""\1F698"
"\1F6A4""\1F698""\1F698""\1F698""\1F698"
"\1F6A4""\1F698""\1F698""\1F698""\1F698"
"\1F698""\1F698""\1F698""\1F698""\1F698";
suffix: " ";
}
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
<br>
https://symbl.cc/en/unicode/blocks/transport-and-map-symbols/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment