JSFiddle - React, Tailwind, and code Playground

HTML

<p class="parent">
  <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </spam>
    </a>
</p>

CSS

.parent {
  position: relative;
}

.parent a {
  position: absolute;
}

.parent .double-tap {
  display: none;
}

.parent .double-tap {
  display: block;
}

a .animate {
  display: block;
}

a:hover .animate:before {
  content: 'hoverrrr'
}