HTML and CSS Reference
In-Depth Information
position: absolute
to the
:after
pseudo-element), you'd be safest
applying the sprite style to the
:before
element.
Using sprites for padded elements.
Let's assume we need to indicate that our article is available in other
languages (probably on a di
"
erent page or even website). We'll add a little
notification box, listing the di
"
erent translations of the current article. If the
text breaks onto a second line, though, we do not want it to crawl below our
little icon, so we'll use the
spritePadded
mixin:
<section class="notification translated">
<p>Translation available…</p>
</section>
.translated p {
padding-left: 22px;
position: relative;
}
.translated p:before {
.spritePadded(5, 5, 16px, 14px);
left: 0;
top: 0;
}
e Ideal Sprite
So, have we achieved CSS sprite wizardry here? Heck, no! If you've been
paying close attention, you might have noticed that the use cases above
o
"
er no solution for adding repeating backgrounds to a sprite. While there
