Split Text Hover Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Split Text Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 data-title="Split">Split</h1> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 8em; color: black; margin: 0; padding: 0; text-transform: uppercase; z-index: -1; } h1::before { content: attr(data-title); position: absolute; top: 0; left: 0; color: white; height: 50%; overflow: hidden; z-index: 1; } h1::after { content: attr(data-title); position: absolute; top: 0; left: 0; color: black; height: 55%; overflow: hidden; transition: 0.5s; border-bottom: 0px solid red; z-index: 2; } h1:hover::after { border-bottom: 20px solid yellow; top: -20px; }
