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>