JSFiddle - React, Tailwind, and code Playground

by ydelmas

HTML

<h1>Exemple de sprite</h1>
<p>L'image : <img src="http://azrael.sha.univ-poitiers.fr/~ydelmas/2016-m1-html-css/videostar-img/flag-us-sprite.png" /></p>
<p>Lorem ipsum
    <a class="sprite" href="#">dolor</a>
    sic amet</p>

CSS

.sprite {
    display: inline-block;
    width: 16px; height: 12px;
    text-indent: 16px; overflow: hidden;
    background-image: url(http://azrael.sha.univ-poitiers.fr/~ydelmas/2016-m1-html-css/videostar-img/flag-us-sprite.png);
    background-position: 0 -13px;
    background-repeat: no-repeat;
}
.sprite:hover,.sprite:active,.sprite:focus {
    background-position: 0 0;
}