JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="poll_list">
    <li class='first_topic_list'><a id='first_topic' href='#'>a</a></li>
    <li><a class='topic' href='#'>b</a></li>
    <li><a class='topic' href='#'>c</a></li>
    <li><a class='topic' href='#'>d</a></li>
    <li><a class='topic' href='#'>e</a></li>
    <li><a class='topic' href='#'>f</a></li>
    <li><a class='topic' href='#'>g</a></li>
</ul>

CSS

#poll_list {
	margin: 0;
}
#poll_list li {
	height: 50px;
	list-style-type: none;
	font-size: 20px;
	border-bottom: 5px solid white;
	background-color: #cfcfcf;
	position: relative;
}
#poll_list a {
	text-decoration: none;
	line-height: 50px; /*need to match #poll_list li for text in middle*/

	display: inline-block;
	*display: block;
	*zoom: 1;

	width: 100%;
	height: 50px;	
}
#poll_list a:link, #poll_list a:visited {
	color: black;
}
#poll_list a:hover {
	color: white;
}
#poll_list li:hover  {
	color: #F0F0F0;
	background-color: slateblue;
}
#poll_list li:hover:after  {
	position: absolute;

	top: 0;
	bottom: 0;
	left: -20px;

	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 20px solid slateblue;

	content: "";
}