<h1>Sports with Balls</h1>
<ol class="sportsgif">
<li>Baseball</li>
<li>Basketball</li>
<li>Soccer</li>
<li>Football</li>
</ol>
body {font-family:Georgia,"Times New Roman",serif;margin-left:20px;background:white;}
h1 {font-family:Arial,"Lucida Sans",sans-serif;font-size:2em;width:90%;
			margin-bottom:30px;margin-left:20px;padding-bottom:10px;
      border-bottom:4px solid black;}
ol {margin-left:40px;margin-top:0;padding-top:0;font-size:1.5em;
		list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
		
.sportsgif li {margin-left:0;position:relative;margin-bottom:0.5em;}
.sportsgif li:nth-child(1n):before {display:inline-block;width:37px;height:44px;content:"";
			background-repeat:no-repeat;background-size: 100% 100%;margin-right:10px;}
.sportsgif li:nth-child(1):before {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/sports1.gif');}
.sportsgif li:nth-child(2):before {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/sports2.gif');}
.sportsgif li:nth-child(3):before {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/sports3.gif');}
.sportsgif li:nth-child(4):before {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/sports4.gif');}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.