title: Creating CSS3 Circles connected by lines
body: <p>I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/u5KKX.png" alt="Ideal image prototype"></p>
  
  <p>I am able to implement the circles as such:</p>
  
  <pre><code>span.step {
    background: #ccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #1f79cd;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em; 
  }
  </code></pre>
  
  <p>but the lines are tricky for me to understand.</p>
  
  <p>The size of the circle changes depending on whether it is the active step or not, and the color of the line connecting the circles changes as well depending on status. How would I accomplish this?</p>