<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
li::marker {
  content: "✶";
  display: inline-block;
  color: red;
  animation: color-change 2s infinite alternate;
}
li::after {
  content: "✶";
  display: inline-block;
  color: red;
  animation: color-change 2s infinite alternate;
}

@keyframes color-change {
  0% {
    color: red;
  }
  100% {
    color: blue;
  }
}
const markers = document.getElementsByTagName("li");

for (const marker of markers) {
  marker.animate(
    { rotate: ["0deg", "360deg"] },
    {
      duration: 2000,
      pseudoElement: "::marker",
      iterations: Infinity
    }
  );
  marker.animate(
    { rotate: ["0deg", "360deg"] },
    {
      duration: 2000,
      pseudoElement: "::after",
      iterations: Infinity
    }
  );
}

External CSS

  1. https://codepen.io/chriscoyier/pen/GRpqNwX

External JavaScript

This Pen doesn't use any external JavaScript resources.