Contador CSS

by Marcos vini

HTML

<ul>
<li><div class="top-number"></div> <a>primeiro</a></li>
<li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>  <li><div class="top-number"></div> <a>segundo</a></li>   
</ul>
<h1>
inverso
</h1>
<ul class='reversed'>
<li><div class="top-number"></div> <a>primeiro</a></li>
<li><div class="top-number"></div> <a>segundo</a></li>  
</ul>

CSS

ul{
      width: 250px;
    flex-wrap: wrap;
    counter-reset: top-lista;

}
li{
  padding: 2px;
    height: 58px;
    border-bottom: solid 1px #EEE;
        border-top: solid 1px #ebebeb;
    height: 58px;
    line-height: 58px;
    padding: 0 15px 0 10px;
        position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.top-number::before {
  counter-increment: top-lista;
    content: counter(top-lista,decimal);
    letter-spacing: -2px;
    width: 50px;
    text-align: center;
    font-weight: 200;
    color: #CCC;
    position: absolute;
    left: -5px;
        font: 44px/50px open_sanslight,"Helvetica Neue",Arial,sans-serif;
    top: 5px;
 
}
.top-number{
      display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}
.top-number::after {
    content: "°";
    font-size: 22px;
    top: -8px;
    position: absolute;
    left: 35px;
    color: #ccc;
    letter-spacing: -2px;
}
li a{
  margin-left: 40px;
      font-size: 15px;
    display: block;
    font-weight: bold;
}
.reversed .top-number:before {

    counter-increment: top-lista -1;
  content: counter(top-lista,decimal);
 }
 .reversed {
   counter-reset:top-lista 3;
 }
h1{
  background: #fff3d4;
    border-color: #f6b73c;
        padding-left: 30px;
        box-sizing: border-box;
    max-width: 42rem;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px;
        font-size: 1.125rem;
    border-left-width: 5px;
    border-left-style: solid;
}