revision:
<div class="grid_A">
<a class="effect-1" href="#">first link hover effect</a>
<a class="effect-2" href="#">second link hover effect</a>
</div>
<style>
.effect-1 {display: inline-block;padding: 1vw;}
.effect-1:before {left: 0; bottom: 0; width: 100%; height: 0.3vw; background: #e60023; transform: scaleX(0);}
.effect-1:hover:before {transform: scaleX(1);}
.effect-2 {display: inline-block; padding: 1vw; }
.effect-2:before, .effect-2:after {left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #e60023; }
.effect-2:before {border-width: 0.3vw 0vw 0.3vw 0vw 0vw; transform: scaleX(0);}
.effect-2:after {border-width: 0vw 0.3vw 0vw 0.3vw 0vw; transform: scaleY(0);}
.effect-2:hover:before, .effect-2:hover:after {transform: scale(1, 1);}
</style>
<div class="grid_A">
<a class="effect-3" href="#">third link hover effect</a>
<a class="effect-4" href="#">fourth link hover effect</a>
</div>
<style>
.effect-3 {display: inline-block; padding: 1vw; padding-bottom: 0.5vw; overflow: hidden;}
.effect-3:before {left: 0; bottom: 0; width: 100%; height: 0.5vw; background: blue; transform: translateX(-100%);}
.effect-3:hover:before {transform: translateX(0);}
.effect-4 {padding: 1vw; display: inline-block; overflow: hidden;}
.effect-4:before, .effect-4:after {left: 0; width: 100%; height: 0.5vw; background: darkblue;}
.effect-4:before {bottom: 0; transform: translateX(-100%);}
.effect-4:after {top: 0;transform: translateX(100%);}
.effect-4:hover:before, .effect-4:hover:after {transform: translateX(0);}
</style>
<div class="grid_A">
<a class="effect-5" href="#"><span>fifth link hover effect</span></a>
<a class="effect-6" href="#"><span>sixth link hover effect</span></a>
</div>
<style>
.effect-5 {display: inline-block; overflow: hidden;}
.effect-5:before, .effect-5:after {right: 0vw; bottom: 0; background: darkblue;}
.effect-5:before {width: 100%; height: 0.4vw; transform: translateX(-100%);}
.effect-5:after {width: 0.4vw; height: 100%; transform: translateY(100%);}
.effect-5 > span {display: block; padding: 1vw;}
.effect-5 > span:before, .effect-5 > span:after {left: 0; top: 0; background: darkblue;}
.effect-5 > span:before {width: 100%; height: 0.4vw; transform: translateX(100%);}
.effect-5 > span:after {width: 0.4vw; height: 100%; transform: translateY(-100%);}
.effect-5:hover:before, .effect-5:hover:after, .effect-5:hover > span:before, .effect-5:hover > span:after { transform: translate(0, 0);}
.effect-6 {display: inline-block; overflow: hidden;}
.effect-6:before, .effect-6:after {right: 0; bottom: 0; background: red; transition: transform .3s ease;}
.effect-6:before {width: 100%; height: 0.4vw; transform: translateX(-100%); transition-delay: .9s;}
.effect-6:after { width: 0.4vw; height: 100%; transform: translateY(100%); transition-delay: .6s;}
.effect-6 > span {display: block; padding: 1vw;}
.effect-6 > span:before, .effect-6 > span:after {left: 0; top: 0; background: blue; transition: transform .3s ease;}
.effect-6 > span:before {width: 100%; height: 0.4vw; transform: translateX(100%); transition-delay: .3s;}
.effect-6 > span:after {width: 0.4vw; height: 100%; transform: translateY(-100%); transition-delay: 0s;}
.effect-6:hover:before, .effect-6:hover:after, .effect-6:hover > span:before, .effect-6:hover > span:after {transform: translate(0, 0);}
.effect-6:hover:before {transition-delay: 0s;}
.effect-6:hover:after {transition-delay: .3s;}
.effect-6:hover > span:before {transition-delay: .6s;}
.effect-6:hover > span:after {transition-delay: .9s;}
</style>
<div class="grid_A">
<a class="effect-7" href="#" data-content="seventh link hover effect"><span>seventh link hover effect</span></a>
<a class="effect-8" href="#" data-content="eight link hover effect"><span>eight link hover effect</span></a>
</div>
<style>
.effect-7 {display: inline-block; overflow: hidden;}
.effect-7:before {left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateX(-100%);}
.effect-7:after { content: attr(data-content); left: 0; top: 0; width: 0; margin: 1.2vw; color: #e60023; white-space: nowrap; overflow: hidden; transition: width 0.5s ease;}
.effect-7 > span {display: block; margin: 0.2vw; padding: 1vw; background: #fbb016;}
.effect-7:hover:before {transform: translateX(0);}
.effect-7:hover:after {width: calc(100% - 2.4vw);}
.effect-8 {display: inline-block; overflow: hidden;}
.effect-8:before {left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateY(-100%);}
.effect-8:after {content: attr(data-content);top: 0; left: 0; height: 0; margin: 1.2vw; color: #e60023; white-space: nowrap; overflow: hidden; transition: height .5s ease;}
.effect-8 > span {display: block; margin: 0.2vw; padding: 1vw; background: #fbb016;}
.effect-8:hover:before {transform: translateY(0);}
.effect88:hover:after {height: calc(100% - 2.4vw);}
</style>