Simple arrows/flechas CSS/sass

Muchas veces es necesario tener un poco de estilo en botones, links y otros contenidos, cuando no tenemos acceso a la estructura podemos optar por poner pseudo-classes que ayuden a hacer un mejor trabajo.

$color: #000

div
	padding: 20px
	font-size: 18px
	display: inline-block
	border-right: 1px solid $color
	position: relative
	&amp;:after
		content: ''
		width: 0
		height: 0
		border-width: 0px
		border-color: transparent $color transparent transparent
		border-style: solid
		position: absolute
		// INICIO: Depende de la ubicación
		right: 0 
		top: 50%
		transform: translate(0, -50%)
		// FIN: Depende de la ubicación
		transition: all .3s ease-in-out
	&amp;:hover,
	&amp;:active
		&amp;:after
			border-width: 8px

See the Pen Simple Arrow CSS by Carlos Alberto Carvajal (@cardex107) on CodePen.