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