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;

}
li:hover {
	color:#fff;
	background:#FF3300
}

JavaScript

$("li").hover(function() {
	$(this).find("span").animate({
	"left" : "0",
	"right" : "-300px"
	},3000)
	},function() {
	$(this).find("span").animate({
	"left" : "-300px",
	"right" : "0"
	},300)
	})