title: How do I animate pseudo elements like :before on webkit browsers?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/10578424/css3-transitions-on-pseudo-elements-after-before-not-working">CSS3 transitions on pseudo-elements (:after, :before) not working?</a>  </p>
  </blockquote>
  
  
  
  <p>My CSS transitions only work in Firefox...not sure why it is not animating in chrome, safari, or Opera.</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/chovy/HUDuy/" rel="nofollow noreferrer">http://jsfiddle.net/chovy/HUDuy/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ol class="steps"&gt;
          &lt;li&gt;Foo&lt;/li&gt;
          &lt;li&gt;Bar&lt;/li&gt;
          &lt;li&gt;Baz&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ol.steps {
    list-style-type: none;
    counter-reset: step-counter;
    padding-left: 60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  ol.steps li {
    position: relative;
    padding: 10px 20px;
    height: 50px;
  }
  
  ol.steps li:before {
    content: counter(step-counter, decimal);
    counter-increment: step-counter;
    position: absolute;
    left: -50px;
    top: 10px;
    border: 1px solid #ccc;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50px;
    background: #f9f9f9;
    text-align: center;
    font-size: 28px;
    color: #aaa;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }
  
  ol.steps li:hover:before {
    width: 60px;
    height: 60px;
    line-height: 60px;
    left: -57px;
    top: 2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  </code></pre>