counter()计数器和@counter-style结合使用实例页面

回到相关文章 »

效果:

凯德·坎宁安(活塞) 杰伦·格林(火箭) 埃文·莫布里(骑士) 斯科蒂·巴恩斯(猛龙) 杰伦·萨格斯(魔术)

代码:

CSS代码:
.rank {
  display: grid;
  grid: auto / auto 1fr;
  gap: 5px;
  counter-reset: rank;
}
@counter-style nbaRank {
  system: additive;
  additive-symbols: 探花 3, 榜眼 2, 状元 1;
  range: 1 3;
  fallback: cjk-decimal;
}
.rank span {
  display: contents;
}
.rank span::before {
  counter-increment: rank;
  content: counter(rank, nbaRank);
  background-color: #333;
  color: #fff;
  padding:0 3px;
  border-radius: 3px;
  text-align: right;
}
HTML代码:
<div class="rank">
  <span>凯德·坎宁安(活塞)</span>
  <span>杰伦·格林(火箭)</span>
  <span>埃文·莫布里(骑士)</span>
  <span>斯科蒂·巴恩斯(猛龙)</span>
  <span>杰伦·萨格斯(魔术)</span>
</div>