JSFiddle - React, Tailwind, and code Playground

HTML

<a class="myElement" href="http://google.com">Click me</a>

CSS

body {padding: 40px;}

.myElement{
  /* ( For pseudo-element to display next to element)*/
  display: inline-block;
  position: relative;
  overflow: hidden;
    font-size: 16px;
}

.myElement::before {
 /* ( for off state)*/
  display: none;
 /*( pseudo-elements wont show without this)*/
  content: '';

  /*( w & h are zero to use border thickness for construction )*/
  width: 0; 
  height: 0;
  border-left: 0.8em solid transparent;
  border-top: 0.8em solid red;
  border-right: 0.8em solid transparent;

  /*(Pos: Absolute to prevent "hover kick" of shifting inline elements)*/
  position: absolute;
  top: 0;
  left: -0.8em;
}

.myElement:hover::before{
  display: inline-block;
}