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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.