<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;
}