Creating a beautiful CSS hover effect using pseudo-elements of CSS

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. The position of div#myDiv is set to relative to keep it’s absolute positioned child elements inside it and its width is set to a constant number (eg. 694px) to accommodate the text line inside div#layer fully.
  2. The value of the data-text attribute of div#layer is used as content for div#layer:after pseudo-element and it is the same as text inside the div#layer element.
  3. The 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, the first line is div#layer element and the 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 the div#layer element gives an illusion that its 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.

Newsletter Updates

Enter your name & email address below to subscribe to our newsletter

Leave a Reply