title: CSS circles and lines - connectors
body: <p>I am trying to create some lines and circles that connect themselves with each other.</p>
  
  <p>Here is <a href="http://jsfiddle.net/v9Vqe/" rel="nofollow">my attempt</a> but I am only able to connect the first circle to the first line, however I want to have several displayed horizontally.</p>
  
  <p>Code from fiddle:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .flow {
      height: 5em;
      left: -0.3em;   
  }
  
  .flow div:first-child {
      left: 0em;  
  }
  
  .circle {
      border-radius: 50%;
      display: inline-block;
      background: green;
      width: 2.5em;
      height: 2.5em;
      box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      position: relative;
      left:inherit;
  }
  
  .line {
      display: inline-block;
      background: green;
      height: 0.5em;
      width: 300px;
      position: relative;
      margin-bottom: 1.0em;
      box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      -moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      -webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
      left:inherit;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="flow"&gt;
         &lt;div id="circle1" class="circle"&gt;&lt;/div&gt;
         &lt;div class="line"&gt; &lt;/div&gt;
         &lt;div id="circle1" class="circle"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>