Reversed counter-reset

概要

通常は昇順にカウントするCSSカウンターを、reversed() 関数で降順カウンターに変更できます。自動的にリストの総数から逆順に番号を振る動作を実現し、<ol reversed> と同等のCSS機能を提供します。ランキングリストやカウントダウン表示に有用ですが、現在Firefoxでのみサポートされています。

対応ブラウザ

基本構文

ol {
  counter-reset: reversed(rank);
}
li {
  counter-increment: rank -1;
}
li::before {
  content: counter(rank) '. ';
}

実務での使いどころ

• ランキングリストのカウントダウン表示

  CSSカウンターを逆順にして、ランキングの順位を自動的に降順で番号付けできます。

注意点

アクセシビリティ

• リストの順序がスクリーンリーダーに正しく伝わるよう、意味的には <ol reversed> 要素を使用し、CSSカウンターは視覚的な補助として使ってください。

参考リンク

• MDN Web Docs — Reversed counter-reset