css - 在 css 计数器中使用第三章，而不是第三章

Question

如何在 css 有序计数器中使用“第三章”而不是“第三章”？

规范规定数字可以是 css 的列表样式类型可以是任何东西。

由于没有 list-style-type = alpha，我是否不走运？

标签： css

Answer 1

没有JS，也不完全可能。如果你知道你有多少章，你可以手动定义你自己的固定计数器样式@counter-style。

main {
  counter-reset: count;
}

h1::before {
  counter-increment: count;
  content: "Chapter " counter(count, alpha);
}

@counter-style alpha{
  system: fixed;
  symbols: "One" "Two" "Three" "Four" "Five" "Six" "Seven" "Eight" "Nine" "Ten" "Eleven" "Twelve" "Thirteen" "Fourteen" "Fifteen" "Sixteen" "Eighteen" "Ninteen" "Twenty";
  suffix: " ";
}

<main>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
  <div>
    <h1></h1>
    <span>some content some content some content some content some content some content some content some content some content some content</span>
  </div>
</main>