HTML5, CSS3 & JS Experiments

<ul class="css3-background-image-cropping">
    <li><a href="some-file.md">some-file.md</a></li>
    <li><a href="some-file.pdf">some-file.pdf</a></li>
    <li><a href="some-file.txt">some-file.txt</a></li>
</ul>
            <p> </p>
<!--            <p class="options-block">Looking for enterprise HTML5, CSS3 and JavaScript web controls? 
    Check <a href="http://wemakesites.net/" target="_blank">AcidJs.WebUI</a>.</p>-->
            
        

/**
 * @info CSS3 Background Image Cropping
 * @author Martin Ivanov
 * @web http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 */

:root .css3-background-image-cropping a::before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 0 0;
    width: 16px;
    height: 16px;
    background: url("../pages/css3-background-image-cropping/example/icons.png") no-repeat;
}

:root .css3-background-image-cropping a
{
    color: #21759b;
}

:root .css3-background-image-cropping a[href$=".md"]::before
{
    background-position: 0 -64px;
}

:root .css3-background-image-cropping a[href$=".pdf"]::before
{
    background-position: 0 -80px;
}

:root .css3-background-image-cropping a[href$=".txt"]::before
{
    background-position: 0 -96px;
}