Result
CSSカウンターで加えた数字をグラデーションに、というもの
スクロールしても色が変わらず維持できます
だからどうしたと言われたらまぁ言い返す言葉も無いんですが
css
/* リストのスタイル*/li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box;}/* カウンター表示 */li::before { content: counters(index, ".", decimal-leading-zero);/*先頭に0を付けて桁数を一定にする*/ 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;/*透明にしてグラデーションが見えるようにする*/} |
html
<ul><li>hoge</li><li>piyo</li><li>foo bar</li></ul> |
can i use
CSSカウンターのブラウザ対応状況です
