<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.