JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%;">
	<ul>
		<li>
			<a class="content" href="javascript:;">
				Please mouse over after the words
			</a>
		</li>
		<li>
			<a class="content " href="javascript:;">
				Please mouse over after the words
			</a>
		</li>
	</ul>
</div>

CSS

ul {
	list-style: none; margin: 0px; padding: 0px; border: 0px; position: relative;
}
li {
	padding: 0px; position: relative;
	cursor: pointer;
}
.content {
	padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none;
    display: block;
    
    background:#fff;
}
.content:hover {
    margin: 0;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f4fd', endColorstr='#c7e9f9',GradientType=0 );
}