Cacher is the code snippet organizer for pro developers

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #34495e;
	font-family: 'Open Sans', arial, sans-serif;
	color: #333;
}

ul {
	display: block;
	width: 300px;
}

li {
	float: left;
	margin: .5em 1em;
	font-size: 1.1em;
	font-weight: 600;
}

li a {
	color: #fff;
	text-decoration: none;
}

li a:before {
	content: '';
	display: inline-block;
	margin-right: 0.5em;
	width: 0.8em;
	height: 0.8em;
	background-image: linear-gradient(
		135deg,
		transparent 0%,
		transparent 50%,
		#f9d11a 50%,
		#f9d11a 100%
	);
	transition: all .15s;
}

li a:hover:before {
	background-image: linear-gradient(
		135deg,
		transparent 0%,
		transparent 50%,
		#2ecc71 50%,
		#2ecc71 100%
	);
	transform: rotate(-30deg) skew(22.5deg) translate(-0.2em);
}

<ul>
	<li><a href="#">Hover Me</a></li>
	<li><a href="#">Hover Me</a></li>
	<li><a href="#">Hover Me</a></li>
	<li><a href="#">Hover Me</a></li>
	<li><a href="#">Hover Me</a></li>
	<li><a href="#">Hover Me</a></li>
</ul>