Fill Text Effect On Hover(mouse over) using CSS content Property

You can add css Pseudo-classes “:before” selector, using CSS content Property “{content:attr();}” CSS h1 { margin:0px; padding:0px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:8em; color:green; font-family:Verdana, Geneva, sans-serif; text-transform:uppercase; } h1:before { position:absolute; content:attr(data-text); top:0px; left:0px; color:red; width:0%; overflow:hidden; transition:1s; } h1:hover:before {width:100%;} HTML <!DOCTYPE HTML> READ MORE