ul
  each i in Array(30)
    li hoge
    li piyopiyo
    li foo bar!
View Compiled


/* List element */
li {
  counter-increment: index;
  display: flex;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
}

/* Element counter */
li::before {
  content: counters(index, ".", decimal-leading-zero);

  text-align: right;
  font-weight: bold;
  min-width: 50px;
  padding-right: 12px;
  align-self: flex-start;
  background-image: linear-gradient(to bottom, red, blue);
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.