css - 为 Top 10 帖子添加数字

Question

下面你可以看到一张图片，它向你展示了我正在尝试实现的目标，但我目前使用的方法却只显示每个数字为 1。我不确定如何为每个数字实现这个不同的数字发布。

这是我当前的 HTML，但我假设我想要的是用 CSS 更改该数字的东西？

<div id="top_songs_section" class="item_box module">
    <h2 class="heading_title">Top Singles</h2>
    <ul>
        <li>
            <span class="rank">1</span>
            <div class="info">
                <div class="desc">
                    <a href="/s/26849/White_Iverson__Remix___feat__French_Montana___Rae_Sremmurd_" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">
                        <p class="title">White Iverson (Remix) (feat. French Montana & Rae Sremmurd)</p>
                        <p class="artist">Post Malone</p>
                    </a>
                    <a class="play btn song" song_id="26849" song_version_id="" album_id="" title="Post Malone - White Iverson (Remix) (feat. French Montana & Rae Sremmurd)">play</a>
                </div>
            </div>
        </li>                  
    </ul>
    <div class="sub_title group">
        <a class="see_all_btn" href="/most_popular">See all</a>
    </div>

Answer 1

您可以使用计数器实现此目的。CSS示例

ul {
  counter-reset: counter1;
}
ul li:before {
  content: counter(counter1);
  counter-increment: counter1;
}

这是 jsfiddle:https://jsfiddle.net/9dcfjpnu/

浏览器支持很好 http://caniuse.com/#feat=css-counters

附言我改了p至 span在 .desc 中的链接中因为将 block 级元素放在链接中被认为是不好的做法。

附言您可以使用 <ol> 更轻松地实现这一目标而不是 <ul> , 所以如果可以的话最好使用 answer by repzero。