title: Progress line with numbers
body: <p>I try to create a progress line for my page that looks like that:</p>
  
  <pre><code>     (1)------------(2)------------(3)------------(4)
     Step #1        Step #2        Step #3        Step #4
  </code></pre>
  
  <p>but I cannot set the last bullet of my list to stay at the very very right.</p>
  
  <p>The code  I have write is based on <code>ul</code> list, and you can find the <strong><a href="http://jsfiddle.net/merianos/3kngwfgf/" rel="nofollow">sample code</a></strong> on jsfiddle.</p>
  
  <p>My code is the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 60px;
  }
  #progress-container {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid #999;
    position: relative;
    margin-top: 20px;
  }
  #progress-container li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    width: 24%;
    text-align: center;
    padding-top: 20px;
    font-size: 16px;
    color: #2A668A;
  }
  #progress-container li::before {
    content: '1';
    position: absolute;
    top: -20px;
    left: 45%;
    background: #EEB0B1;
    padding: 5px 12px;
    font-size: 18px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #FFF;
    font-weight: bold;
  }
  #progress-container li.active::before {
    background: #d33434;
  }
  #progress-container li:nth-child(1) {
    margin-left: -12%;
  }
  #progress-container li:nth-child(1)::before {
    content: '1';
  }
  #progress-container li:nth-child(2) {
    margin-left: 6%;
  }
  #progress-container li:nth-child(2)::before {
    content: '2';
  }
  #progress-container li:nth-child(3) {
    margin-left: 6%;
  }
  #progress-container li:nth-child(3)::before {
    content: '3';
  }
  #progress-container li:nth-child(4) {
    margin-right: 12%;
  }
  #progress-container li:nth-child(4)::before {
    content: '4';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;ul id="progress-container"&gt;
      &lt;li class="active"&gt;
        Level #1
      &lt;/li&gt;
      &lt;li&gt;
        Level #2
      &lt;/li&gt;
      &lt;li&gt;
        Level #3
      &lt;/li&gt;
      &lt;li&gt;
        Level #4
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Note</strong> : The code in JsFiddle is the current one that needs to be corrected. If you have any suggestion on how to fix the visual problem, please help, or if you have any other way to do it, just tell me :)</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Just if somebody is interested in the feature the code is here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#progress-container.horizontal {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid #999;
    position: relative;
  }
  
  #progress-container.horizontal li {
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    position: relative;
    display: inline-block;
    width: 24%;
    text-align: center;
    font-size: 16px;
    color: #2A668A;
  }
  
  #progress-container.horizontal li::before {
    content: '1';
    position: absolute;
    top: -20px;
    left: 41%;
    background: #EEB0B1;
    padding: 5px 12px;
    font-size: 18px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #FFF;
    font-weight: bold;
  }
  
  #progress-container.horizontal li.active::before {
    background: #d33434;
  }
  
  #progress-container.horizontal li:nth-child(1) {
    left: -12%;
  }
  
  #progress-container.horizontal li:nth-child(1)::before {
    content: '1';
  }
  
  #progress-container.horizontal li:nth-child(2) {
    left: -3%;
  }
  
  #progress-container.horizontal li:nth-child(2)::before {
    content: '2';
  }
  
  #progress-container.horizontal li:nth-child(3) {
    left: 5%;
  }
  
  #progress-container.horizontal li:nth-child(3)::before {
    content: '3';
  }
  
  #progress-container.horizontal li:nth-child(4) {
    left: 14%;
  }
  
  #progress-container.horizontal li:nth-child(4)::before {
    content: '4';
  }
  
  #progress-container.vertical {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid #999;
    position: relative;
  }
  
  #progress-container.vertical li {
    margin: 0 0 25px;
    padding: 0 0 0 50px;
    list-style: none;
    position: relative;
    font-size: 16px;
    color: #2A668A;
    display: block;
    left: -18px;
  }
  
  #progress-container.vertical li::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    background: #EEB0B1;
    padding: 5px 12px;
    font-size: 18px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #FFF;
    font-weight: bold;
  }
  
  #progress-container.vertical li.active::before {
    background: #d33434;
  }
  
  #progress-container.vertical li:nth-child(1)::before {
    content: '1';
  }
  
  #progress-container.vertical li:nth-child(2)::before {
    content: '2';
  }
  
  #progress-container.vertical li:nth-child(3)::before {
    content: '3';
  }
  
  #progress-container.vertical li:nth-child(4)::before {
    content: '4';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="progress-container" class="horizontal hidden-xs"&gt;
      &lt;li class="active"&gt;
          Step 1
      &lt;/li&gt;
      &lt;li&gt;
          Step 2
      &lt;/li&gt;
      &lt;li&gt;
          Step 3
      &lt;/li&gt;
      &lt;li&gt;
          Step 4
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="progress-container" class="vertical visible-xs"&gt;
      &lt;li class="active"&gt;
          Step 1
      &lt;/li&gt;
      &lt;li&gt;
          Step 2
      &lt;/li&gt;
      &lt;li&gt;
          Step 3
      &lt;/li&gt;
      &lt;li&gt;
          Step 4
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>