JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<span>Read More</span>

CSS

body {
  margin: 40px;
  background: white;
}

span {
  font-family: Montserrat;
  font-weight: bold;
  font-size: 30px;
  position: relative;
  text-transform: uppercase;
}

span:hover {
  cursor: pointer;
}

span::before,
span::after {
  position: absolute;
  height: 8px;
  left: -15px;
  background: black;
  width: 4px;
  content: "";
  transition: all .15s;
  transition-timing-function: cubic-bezier(.17, .67, .76, 1);
}

span::before {
  top: 12px;
}

span::after {
  top: 19px;
}

span:hover::before {
  transform: rotate(-36deg) translateX(3px) translateY(4px);
}

span:hover::after {
  transform: rotate(36deg) translateX(3px) translateY(-4px);
}