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> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Fill Text Effect On Hover – Css3 Hover Effect</title> <body> <h1 data-text=”gulam”>Gulam </h1> </body> </html>

It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page.

The property is used to insert generated content in a web page and it is fully supported in all major browsers.

Demo here:

3 thoughts on “Fill Text Effect On Hover(mouse over) using CSS content Property”

Leave a Reply

Your email address will not be published. Required fields are marked *

*