JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

CSS

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
}

ul { margin: 20px; padding: 0; }

li {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	background-color: #fff;
}
li:after {
	content: "";
	pointer-events: none;
	position: absolute;
	width: 100px;
	height: 100%;
	top: 0; right: 0;
	
	background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/*
This piece of code works great too, but only on Webkit Browsers!
li {
    color: white;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}
*/