<a href="#"><span class="arrow left"></span></a>
<a href="#"><span class="arrow right"></span></a>

<div>
	<p>Here is some text<br>with an action<br>at the end.</p>
	<p><a href="#">Take action <span class="arrow right"></span></a></p>
</div>
.arrow {
	--arrow-size: 1em;
	--arrow-color: rgb(255,255,255);
	--arrow-color-hover: rgba(255,255,255,0.5);
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	width: var(--arrow-size);
	height: var(--arrow-size);
	overflow: hidden;
	
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		box-sizing: border-box;
		display: inline-block;
		width: calc( var(--arrow-size) * .7071);
		height: calc( var(--arrow-size) * .7071);
		border-top: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
		transition: all 150ms ease-in-out;
	}
	
	&.left {
		&::after {
			left: calc( var(--arrow-size) / 5 );
			border-left: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top left;
			rotate: -45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}

	&.right {
		&::after {
			right: calc( var(--arrow-size) / 5 );
			border-right: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top right;
			rotate: 45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}
}

a {
	&:hover .arrow {
		&.left,
		&.right {
			&::after {
				border-color: var(--arrow-color-hover);
			}
		}

		&.left {
			&::after {
				box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}

		&.right {
			&::after {
				box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}
	}
}


/* for demo only */
html,
body {
	height: 100%;
}

body {
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	background: black;
	color: gray;
	
	> a .arrow {
		--arrow-size: 3rem;
	}
}

a {
	color: skyblue;
	text-decoration: none;
	
	&:hover {
		color: white;
	}
}

p a {
	font-size: 1.25rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.