body{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:100vh}body .wrap .card{position:relative;cursor:pointer}body .wrap .card:before{content:"";position:absolute;width:calc(100% + 10px);height:calc(100% + 10px);top:calc(5px/-1);left:calc(5px/-1);-webkit-mask:linear-gradient(90deg,#000 0,#000),linear-gradient(0deg,#000 50%,transparent 0),linear-gradient(0deg,#000 50%,transparent 0),linear-gradient(90deg,#000 0,#000),linear-gradient(270deg,#000 0,#000);mask:linear-gradient(90deg,#000 0,#000),linear-gradient(0deg,#000 50%,transparent 0),linear-gradient(0deg,#000 50%,transparent 0),linear-gradient(90deg,#000 0,#000),linear-gradient(270deg,#000 0,#000);-webkit-mask-size:100% 5px,5px 200%,5px 200%,0 5px,0 5px;mask-size:100% 5px,5px 200%,5px 200%,0 5px,0 5px;-webkit-mask-position:50% 100%,0 0,100% 0,100% 0,0 0;mask-position:50% 100%,0 0,100% 0,100% 0,0 0;-webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;transition:transform .4s ease-in-out,-webkit-mask-position .4s ease-in-out,-webkit-mask-size .4s ease-in-out;transition:transform .4s ease-in-out,mask-position .4s ease-in-out,mask-size .4s ease-in-out;transition:transform .4s ease-in-out,mask-position .4s ease-in-out,mask-size .4s ease-in-out,-webkit-mask-position .4s ease-in-out,-webkit-mask-size .4s ease-in-out;transform:scaleX(0) rotate(0deg);transition-delay:.8s,.4s,0s;background:linear-gradient(180deg,#1dcf9f,#18fc73);border-radius:.6rem}body .wrap .card:hover:before{-webkit-mask-size:200% 5px,5px 400%,5px 400%,55% 5px,55% 5px;mask-size:200% 5px,5px 400%,5px 400%,55% 5px,55% 5px;-webkit-mask-position:50% 100%,0 100%,100% 100%,100% 0,0 0;mask-position:50% 100%,0 100%,100% 100%,100% 0,0 0;transform:scaleX(1) rotate(0deg);transition-delay:0s,.4s,.8s}.tabitem{display:inline-block;position:relative;cursor:pointer}.tabitem:after,.tabitem:before{content:"";position:absolute;height:2px;width:0;background-color:#1dcf9f;transition:width .3s ease;width:50%}.tabitem:before{left:0;top:0}.tabitem:after{right:0;bottom:0}