title: Extend Line with CSS
body: <p>I have making an AJAX wizard using JQuery and I'm trying to get the top navigation indicators to work properly. So far I have this:</p>
  
  <p><img src="https://i.stack.imgur.com/yWopV.png" alt="enter image description here"></p>
  
  <p>I'm trying to extend the line when the user pushes "Next Step".</p>
  
  <p>What I would really like is to have it animate to the next step. My initial approach is to have the light gray line just a "border" property of the "ol" property, and then have a normal "img" tag right after the ol and set these CSS properties on the image (which is an image of a small orange line):</p>
  
  <pre><code>{
  position:absolute;
  margin-top:-37px;
  margin-left:-3px;
  height:13px;
  width:400px;
  }
  </code></pre>
  
  <p>So I have a "Proceed" function which fades out the current step and fades in the next step. This is all working great. I was thinking I could increase the width of this orange line (using "animate" but the problem is it goes over the Step indicater (the little "o") like this:</p>
  
  <p><img src="https://i.stack.imgur.com/PZHGE.png" alt="enter image description here"></p>
  
  <p>Is there a better way of doing something like this?</p>
  
  <p>I know it's nit picky little issue, but any advice would really help!</p>
  
  <p>Thank you</p>
  
  <p>UPDATE: By the way, I forgot to add that I have many of these wizards with any different number of steps, so if I did it the way I'm trying to do it, I would need to find the length of width between each step, which would be a lot of work. But if it's the only way, then I can do this</p>