:has()を使って親要素内に存在する子要素を数えるCSSのサンプル
Result See the Pen Counting child items with :has() by kachibito (@kachibito) on CodePen. かなり世間から遅れていて今...
CSS - content:counters;
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. CSSカウンターで加えた数字をグラデーションに、とい...
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子...
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する
Result See the Pen CSS-only Todo by kachibito (@kachibito) on CodePen. いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで...
テーブルに自動で行数を表示する
Result See the Pen CSS table row numeration by kachibito (@kachibito) on CodePen. tableに行数を表示します。疑似要素にcss-countersで加...
CSSだけでcheckboxのチェック数をカウントする
Result See the Pen opWdyj by kachibito (@kachibito) on CodePen. content: counter;を使ってチェック数をカウントする、というもの JSによるもののように...
矢印型のパンくずナビゲーション
Result See the Pen Pure CSS3 breadcrumb navigation - the pixel perfect way by kachibito (@kachibito) on CodePen. 矢印型...
CSSだけで要素に自動連番
Result See the Pen auto nanbering by kachibito (@kachibito) on CodePen. ulのように自動で連番が付くやつです。li以外でも実装可能です css ca...