HTML and CSS Reference
In-Depth Information
We might be lacking a structural element to visualize our image, but 2011
taught us that pseudo-elements are the perfect hack to overcome this
problem (Nicolas Gallagher's eye-opening article on using pseudo-elements
for background images explains everything in detail). This is why the
spriteInline mixin was especially developed to be used within
a :before or :after selector (depending on where the image needs to
appear). We'll add an inline-block declaration to the pseudo-element so
that it behaves like an inline element while still allowing us to add fixed
dimensions to it, and we'll add the content property, which is needed just
for visualizing the pseudo-element.
Using sprites for inline images.
The example above shows a list of a ! liate links. The design demands that
each link be limited to one line, so we can safely use the .spriteInline
mixin to display the icons in front of each link:
<ul class="affiliates">
<li class="amazon"><a href="#">Buy on Amazon.com</a></li>
</ul>
.affiliates .amazon a:before {
.spriteInline(4, 1, 22px, 16px);
}
Search WWH ::




Custom Search