Last Updated: February 25, 2016
·
2.464K
· gidgets

Pseudo :before/:after sprites

When using CSS sprites with pseudo elements, make sure you include these lines to ensure the sprite shows up:

HTML:
<div class="button">ENERGIZE!</div>

CSS:
.button:before {
content: "";
padding-left: 30px;
}
.button:after {
content: "";
padding-right: 30px;
}

My tip doesn't use float, but padding instead. Here's a good article of pseudo sprites that uses float on the pseudo element.
http://css-tricks.com/pseudo-spriting/