:before aliagnment
by danwoods
HTML
<ol>
<li>
<span>Thickness</span>
</li>
<li>
<span>Size</span>
</li>
<li>
<span>Cart</span>
</li>
</ol>
CSS
ol {
color: #000;
display: block;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
width: 960px;
}
li {
color: #000;
display: list-item;
float: left;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
height: 50px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
width: 190px;
}
span {
-webkit-transition-delay: 0s;
-webkit-transition-duration: 1.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
color: #808080;
display: inline-block;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
height: 50px;
line-height: 47px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
transition-delay: 0s;
transition-duration: 1.5s;
transition-property: all;
transition-timing-function: ease-in-out;
width: 190px;
}
span:before {
content: url(https://dl.dropboxusercontent.com/u/6114719/progress-2.png);
position: absolute;
margin: 4px 0 0 -25px;
transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s...