<div class="container">
	<ul class="feed">
		<li class="feed__item"><a class="arrowLink" href="#">Short inline link<i class="arrowLink__icon"></i></a></li>
		<li class="feed__item"><a class="arrowLink" href="#">Multiline link. The arrow stays centered on the <code>&lt;li&gt;</code>,<br/>regardless of how many lines are present.<i class="arrowLink__icon"></i></a></li>
		<li class="feed__item"><a class="arrowLink arrowLink--block" href="#">Short link with the <code>--block</code> modifier<i class="arrowLink__icon"></i></a></li>
		<li class="feed__item"><a class="arrowLink arrowLink--block" href="#">Multiline link with the<br/><code>--block</code> modifier<i class="arrowLink__icon"></i></a></li>
	</ul>
</div>

.container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.feed__item {
	margin-bottom: .8em;
}

.arrowLink {
	display: inline-block;
	font-size: 1.2rem;
	padding-right: 1.5em;
	line-height: 1em;
	
	&--block {
		display: block;
	}

	&__icon {
		display: inline-block;
		height: 100%;
		position: absolute;
		top: .1em;
		right: 0;

		&::before,
		&::after {
			content: '';
			transition: all 275ms cubic-bezier(.4,.25,.3,1);
			position: absolute;
			right: 0;
			background-color: #56b6e6;
			width: 3px;
			height: .75rem;
			border-radius: 3px;
		}

		&::before {
			bottom: 50%;
			transform: translateX(0) rotate(-45deg);
			transform-origin: 100% 100%;
		}

		&::after {
			top: 50%;
			transform: translateX(0) rotate(45deg);
			transform-origin: 100% 0;
		}
	}
	
	&:hover .arrowLink__icon {
		&::before {
			transform: translateX(-1rem) rotate(45deg);
			transform-origin: 0 100%;
		}

		&::after {
			transform: translateX(-1rem) rotate(-45deg);
			transform-origin: 0 0;
		}
	}
}

code {
	font-family: 'Roboto Mono', monospace;
	font-size: .9em;
	padding: 0 .25em;
	background-color: #eee;
	border-radius: 3px;
}