clockLists.html

    <style>
    ul {
      list-style: none; /* Remove list bullets */
      padding: 0;
      margin: 0;
    }
    
    li {
      padding-left: 16px;
    }
    
    li::before {
      content: attr(clock); /* swap in the appropriate clock face */
      padding-right: 8px;
    }
    </style>
    <script>
      const clockFaces=[0x1f550, 0x1f551, 0x1f552, 0x1f553, 0x1f554, 0x1f555, 0x1f556, 0x1f557 , 0x1f558 , 0x1f559 , 0x1f55a , 0x1f55b] // thank you js for the stellar emoji support
      $(document).ready(function(){ // yeah, you need jquery for this
        $("ul").each(function(){ // for every new list, we restart the count. it's ul only so it's easier
        var i = 0
        $(this).find("li").each(function(){
          $(this).attr('clock',String.fromCodePoint(clockFaces[i]));
          i++;
          i%=11; // if you extend the clockFaces, change the modulo appropriately
        })
        })
      })
    </script>