JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="#"><span>Hover me to see the box</span></a>
</div>

CSS

body {
  font-family: Calibri;
  font-size: 18px;
  padding:10px;
}

a {
	color: #741c7c;
	font-weight: 500;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
  display: inline-block;
  text-decoration:none;
  position: relative;
}

a:hover{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

a::before {
	position: absolute;
	top: -2px;
	left: -7px;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	border: 2px solid #741c7c;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

a:hover::before{
	opacity: 1;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}