JSFiddle - React, Tailwind, and code Playground

by Alexey Sheremeta

HTML

<p><a href="http://web-wost.ru" target="_blank" class="effect1">WebWost</a></p>
<p><a href="http://web-wost.ru" target="_blank" class="effect2">WebWost</a></p>
<p><a href="http://web-wost.ru" target="_blank" class="effect3">WebWost</a></p>
<p><a href="http://web-wost.ru" target="_blank" class="effect4">WebWost</a></p>

CSS

a {
  color:#000;
  text-decoration:none;
  position:relative;
  margin: 10px;
  top:10px;
}
a.effect1:after {
  content: ' ';
  height:1px;
  width:0;
  left:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a.effect1:hover:after {
  width:100%;
}
a.effect2:after {
  content: ' ';
  height:1px;
  width:100%;
  left:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition: transform 0.2s;
  transform:scaleX(0);
}
a.effect2:hover:after {
  transform:scaleX(1);
}
a.effect3:after {
  content: ' ';
  height:1px;
  width:0;
  left:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a.effect3:before {
  content: ' ';
  height:1px;
  width:0;
  right:0;
  background:#000;
  position:absolute;
  bottom:-1px;
  transition:width 0.2s ;
}
a.effect3:hover:after,a.effect3:hover:before {
  width:100%;
}
a.effect4 {
  padding:10px;
}
a.effect4:after,a.effect4:before{
position:absolute;
content: ' ';
border-style:solid;
border-color:#000;
width:100%;
height:100%;
left:0;
top:0;
transition:transform 0.2s ease;
box-sizing:border-box;
}
a.effect4:after {
border-width: 1px 0;
transform:scaleX(0);
}
a.effect4:before{
border-width: 0 1px;
transform:scaleY(0);
}
a.effect4:hover:after,a.effect4:hover:before{
transform:scale(1,1);
}