Awesome css hover effect for text using css pseudo elements

Awesome css hover effect for text using css pseudo elements

3 min. read

HTML markup

<div id="mainLabel">Hover on the text below to see the effect.</div>
<div id="myDiv">
	<div id="layer" data-text="I AM AN AWESOME HOVER EFFECT">I AM AN AWESOME HOVER EFFECT</div>
</div>

CSS rules

Applying some basic css

body
{
	margin:0px;
	font-size:14px;
	font-family:Nunito,arial,helvetica;
	background-color:#0e8154;
}
	
#mainLabel
{
	padding: 20px;
	text-align: center;
	font-size: 20px;
	margin-top:100px;
	color: #fff;
}
	
#myDiv
{
	position: relative;
	width: 694px;
	margin: 0 auto;
	overflow:hidden;
}

Styling div#layer element and #layer:after pseudo element

#layer,#layer:after
{
	display: block;
	color: #056640;
	white-space: pre;
	font-size: 40px;
	font-weight: bold;
	position: relative;
}

#layer:after
{
	content: attr(data-text);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	overflow: hidden;
	color: #fff;
	background-color: transparent;
	transition: 5s linear width;
}

#layer:hover:after
{
	width:100%;
	cursor:pointer;
}

Explanation of the above css rules

  1. Position of div#myDiv is set to relative to keep it's absolute positioned child elements inside it and it's width is set to a constant number (eg. 694px) to accomodate the text line inside div#layer fully.
  2. Value of data-text attribute of div#layer is used as content for div#layer:after pseudo element and it is same as text inside the div#layer element.
  3. Same font and font-size are applied to both div#layer and div#layer:after pseudo element so that they look similar. ( font-family is inherited from body element )This is very important ! they need to look similar.
  4. white-space : pre css rule is used for both div#myDiv and div#myDiv:after pseudo element (this is required to display the text inside these elements the way we typed them).

See result in the fiddle below

In the above fiddle result first line is div#layer element and second line is div#layer:after pseudo element.

Positioning div#layer:after pseudo element exactly above div#layer element, they must overlap perfectly( that's why they need to look similar )

#layer:after
{
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	color:#fff;
}

Above css changes the color of div#layer:after pseudo element to white and moves it to top-left corner of div#myDiv element ( div#layer:after moves over div#layer element ).

See the fiddle below

In the above fiddle result div#layer:after pseudo element overlapped on div#layer element completely because it has absolute positioning and looks same as div#layer element.

div#layer:after has 0px width but it's content is visible because it is overflowing and displayed in one line due to white-space : pre css rule.

white-space : pre is used on both div#layer and div#layer:after pseudo element to prevent the wrapping of text, as width of div#layer:after is set to 0px, so to display it's text the way we typed it white-space : pre css rule is required.

Now, Hiding the overflowed content of div#layer:after pseudo element ( because of this div#layer element which is under div#layer:after will become visible ).

See result in the fiddle below

Adding some more css to div#layer and div#layer:after pseudo element

#layer:after
{
	transition: 5s linear width;
}

#layer:hover:after
{
	width:100%;
	cursor:pointer;
}

Using the above css causes the width of div#layer:after pseudo element to expand to its full width in a linear way when there is hover on div#layer element.

See final result in the fiddle below

Hovering on div#layer element gives an illusion that it's text color is changing to white, but actually the div#layer:after pseudo element is expanding to its full width whose text color is white.

Write comments