Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS Gradient Counter List
each i in Array(30)
li Lorem dolor amet sit
li Lorem ipsum dolor sit amet consecutor adipiscingLorem ipsum dolor sit amet
li Lorem ipsum dolor sit amet consecutor
/* List */
ul {
counter-reset: index;
padding: 0;
max-width: 300px;
/* 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);
font-size: 1.5rem;
text-align: right;
font-weight: bold;
min-width: 50px;
padding-right: 12px;
font-variant-numeric: tabular-nums;
align-self: flex-start;
background-image: linear-gradient(to bottom, aquamarine, orangered);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Element separation */
li + li {
border-top: 1px solid rgba(255,255,255,0.2);
@use postcss-preset-env {
stage: 0;
autoprefixer: {
grid: true;
browsers: last 2 versions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment