span{cursor:pointer;color:#eee;transition:all .4s}span .text:after{content:attr(data-content);color:#0000;background:linear-gradient(#fff,#fff) bottom/0 2px repeat-y;-webkit-background-clip:text;background-clip:text;padding-inline-start:.5rem;transition:all .6s;position:absolute;left:0}span .text:before{content:attr(data-content);color:#0000;background:linear-gradient(#6c40a7,#6c40a7) bottom/0 2px no-repeat;padding-bottom:4px;transition:all .4s;position:absolute}span:hover .text:after,span:hover .text:before{color:#0000;background-size:100% 2px}span:hover .text:after,span .text.active:after,span:hover .text:before,span .text.active:before{text-shadow:0 0 10px #fff}