Dot Leader

Add a typographic leader between two text elements.

  • Zi 123
  • Arusafi 89
  • Nuumovo 174
  • Emzu 180
<ul class="u-listUnstyled">

  <li class="DotLeader ">
    <span class="DotLeader-start ">Ivazij</span>
    <span class="DotLeader-between " aria-hidden="true"></span>
    <span class="DotLeader-end ">89</span>
  </li>

  <li class="DotLeader ">
    <span class="DotLeader-start ">Widdulak</span>
    <span class="DotLeader-between " aria-hidden="true"></span>
    <span class="DotLeader-end ">173</span>
  </li>

  <li class="DotLeader ">
    <span class="DotLeader-start ">Avovinlu</span>
    <span class="DotLeader-between " aria-hidden="true"></span>
    <span class="DotLeader-end ">133</span>
  </li>

  <li class="DotLeader ">
    <span class="DotLeader-start ">Peoz</span>
    <span class="DotLeader-between " aria-hidden="true"></span>
    <span class="DotLeader-end ">149</span>
  </li>
</ul>