JSFiddle - React, Tailwind, and code Playground

HTML

<div dir="rtl">
<ul>
<li><span>نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر  </span></li>
<li><span>نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر  </span></li>
<li><span>نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر  نمونه متن مورد نظر  </span></li>
<li><span>نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر نمونه متن مورد نظر متن مورد نظر نمونه متن مورد نظر  </span></li>
</ul>
</div>

CSS

div {
	margin:25px 50px;
}
ul {
	width:100px;
	margin:0;
	padding:0;
	overflow:hidden;
	display:inline-block
}
li {
	height:27px;
	display:list-item;
	line-height:27px;
	position:relative;
	color:#000;
	
}
li span {
	display:block;
	position:absolute;
	top:0px;
	bottom:0px;
	right:0;
	left:-300px;
	overflow:hidden;
	height:27px;
	-moz-transition: right 3s linear .2ms;
	-o-transition:right 3s linear .2ms;
	-webkit-transition: right 1.8s linear .2ms;
	transition: right 3s linear .2ms; 
}
li:hover {
	color:#fff;
	background:#FF3300
}
li:hover span {
	right:-300px;
	left:0;
}