Creating web gui and brand icons using css pseudo elements

Creating web gui and brand icons using css pseudo elements

2 min. read

In this tutorial we will be creating the heart icon.

HTML markup

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

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

	padding:20px 20px 60px 20px;

	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.

	/* 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 */

	/* 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).

	position: absolute;
	/* #heart:before is at 0px from top ( by default ) so #heart:after also need to be 0px from top */
	/* 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.

	/* Rotate 50deg in anticlock-wise direction */
	transform: rotate(-50deg);

	/* Rotate 50deg in clock-wise direction */
	transform: rotate(50deg);

Check out final result in the fiddle below

Write comments