Why you should start using Psuedo Elements – now

Why are psuedo-elements so awesome? There are so many reasons, but for me it’s the fact you can use them to simulate just about anything that HTML can do – without the extra markup, or hacky code. Clearing floats is a great example:

.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

Psuedo-elements also come in very handy when coding for WordPress. When we use WordPress, we’re not always in control of our mark-up, navigations and loops are great example of this. On this very website, I wanted a horizontal rule after each row of items on my homepage, and psuedo elements offered the easiest way to do this without having to hack about with my loop.

ul#home-gallery li:nth-child(3):after,ul#home-gallery li:nth-child(6):after,ul#home-gallery li:nth-child(9):after {
	content:'';
	background:#ddd;
	width: 1150px;
	height: 6px;
	position: absolute;
	display: block;
	float: left;
	bottom: -40px;
	left: -780px;
}

Neat.