JSFiddle - React, Tailwind, and code Playground

by bartula

HTML

<ul id="list">
	<li>KHAWER</li>
	<li>ZESHAN</li>
</ul>

CSS

#list {
    position  	: relative;
    width  : 200px;
    padding   	: 0px;
    border    	: 1px black dotted;
}

JavaScript

$(function() {
  $("#list li").each(function(i, e) {
    var $t    = $(this);
    var text  = $t.text();
    var tLen  = text.length -1;
    var i     = 0;
    var letter;
    var ratio;
    
    //  We have the data we need to rebuild text. Lose original text.
    //
    $t.empty();
    
    while(i <= tLen) {
      letter = $("<span></span>")
      .css({
        "position" : "absolute"
      })
      .text(text.charAt(i));
        
      $t.append(letter);
      ratio = i / tLen;
            
      //  Place each character in its rational slot, retreating margin
      //  so as to stay within bounds (last character starts at 100% of width).
      //
      letter.css({
        "left"      : (100 * ratio) + "%",
        "margin-left" : -letter.width() * ratio
      });
      ++i
    }
  });
});