JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<ul>
  <li index="1"></li>
  <li index="2"></li>
  <li index="3"></li>
  <li index="4"></li>
  <li index="5"></li>
</ul>

SCSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    background: #333;
    display: block;
    padding: 10px;
    
    @for $i from 1 through 10 {  
      &:nth-of-type(#{$i}-1) {
          margin-left: calc(50px * #{$i});
          
          &:after {
            content: '#{$i}';
          }
      }
    }
  }
}