JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<a href="#">Click Here To Have A Lot Of Fun</a>

CSS

a {
    padding:3px 4px;
    border-bottom:1px dashed black;
    position:relative;
    text-decoration: none;
       -webkit-transition:all ease-out 1s;
    -moz-transition: all ease-out 1s;
    -o-transition: all ease-out 1s;
    transition: all ease-out 1s;
    color:black;
}
a:hover {
}
a:after{
    width:5px;
    height:5px;
    background: black;
    content:'';
    position:absolute;
    bottom:-3px;
    left:-3px;
    border-radius:5px;
    opacity:0;
           -webkit-transition:all ease-out 1s;
    -moz-transition: all ease-out 1s;
    -o-transition: all ease-out 1s;
    transition: all ease-out 1s;
}
a:hover:after {
    left:100%;
    opacity:1;
    background: red;
    width:15px;
    height:15px;
    bottom:-7px;
    border-radius:21px;
}