JSFiddle - React, Tailwind, and code Playground

HTML

<a class='link1 link--fixed' href="#">Some Text</a>

<a class='link2 link--fixed' href="#">Some Other Text</a>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

.link--fixed {
  background: black;
  color: white;
  padding: .5rem;
  position: fixed;
  left: 0;
  transform: translateX(-100%);
  transition: .6s ease-out;
}

.link--fixed::after {
  background: inherit;
  position: absolute;
  content: 'icon';
  padding: .5rem;
  left: 100%;
  top: 0;
}

.link--fixed:hover {
  transform: translateX(0);
}

.link1 {
  top: 20%
}

.link2 {
  top: 30%
}