Heart icon created using CSS pseudo-elements

In this tutorial we will be creating the heart icon.

HTML markup

<!DOCTYPE html>
<html>
    <body>
        <div id="heart"></div>
    </body>
</html>

Applying some basic styling to body and div#heart elements.

body
{
    padding:20px 20px 60px 20px;
}

#heart
{
    width: 42px;
    height: 42px;
    margin: 0 auto;

    /* Later in our css :after pseudo child element of div#heart will be absolute positioned 
    so div#heart need to be relatively positioned to wrap :after element inside it. */
    position: relative;
}

Creating and styling the two halves of heart icon, #heart:before will be left half and #heart:after will be right half.

#heart:before,#heart:after
{
    /* No content needed to be displayed inside them so set it to empty string */
    content: '';

    /* Give same width to both halves */
    width: 26px;

    /* As the both halves have no content so above css rule width: 26px will not work until we make them block level elements. */
    /* Make them block elements */
    display:block;

    /* Give "appropriate" same height to both halves */
    height: 35px;

    background-color: #F44336;

    /* Make top-left & top-right corners rounded */
    border-radius: 15px 15px 0px 0px;
}

Click here to learn more about the css display property.

See result of all the html & css above, in the fiddle below

As we can see in the above fiddle that the right half of heart icon (#heart:after) is not aligned to left half, so we need to bring it in its right position i.e just beside the left half of heart icon(#heart:before).

Moving right half (#heart:after) to top right-side of left half (#heart:before).

#heart:after
{
    position: absolute;

    /* #heart:before is at 0px from top ( by default ) so #heart:after also need to be 0px from top */
    top:0px;

    /* alinging #heart:after to right-side of #heart:before at "appropriate" position*/
    left: 10px;
}

See result in the fiddle below

Here is the final step, rotating left half (#heart:before) in anticlock-wise 50deg. and right half (#heart:after) in clock-wise 50deg.

#heart:before
{
    /* Rotate 50deg in anticlock-wise direction */
    transform: rotate(-50deg);
}

#heart:after
{
    /* Rotate 50deg in clock-wise direction */
    transform: rotate(50deg);
}

Check out final result in the fiddle below

Newsletter Updates

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

Leave a Reply