title: progress bar styling
body: <p>I'm trying to make a progress bar in CSS, and I'm having trouble styling some of the components. I can't seem to get arrows to change color with the box when hovering.</p>
  
  <p><img src="https://i.stack.imgur.com/M4rLf.png" alt="enter image description here"></p>
  
  <p>this is the html for one of the buttons</p>
  
  <pre><code>  &lt;li&gt;
    &lt;div class="arrow-in"&gt;&lt;/div&gt;
    &lt;div class="outerContainer done"&gt;
        &lt;div class="innerContainer"&gt;
            &lt;div class="element"&gt;&lt;a href="#"&gt;Step 2&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="arrow-right"&gt;&lt;/div&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>and this is the css for the arrows</p>
  
  <pre><code>.arrow-right {
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 20px solid #EBEBEB;
      display: inline-block;
      float: left;
  }
  
  
  .arrow-in {
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 20px solid #FFF;
      display: inline-block;
      float: left;
      background-color: #EBEBEB;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/waspinator/sxC8e/" rel="nofollow noreferrer">http://jsfiddle.net/waspinator/sxC8e/</a></p>
  
  <p>Is this a reasonable approach for this effect or should I be doing something completely different?</p>
  
  <p>EDIT:</p>
  
  <p>I did as suggested and used before and after classes.</p>
  
  <p><a href="http://jsfiddle.net/waspinator/tqVjX/" rel="nofollow noreferrer">http://jsfiddle.net/waspinator/tqVjX/</a></p>
  
  <p>how could I now position the circles to be in the center right without displacing text?</p>
  
  <p>EDIT2: </p>
  
  <p>ok another method, but now I can't get more than one line of text</p>
  
  <p><a href="http://jsfiddle.net/waspinator/fwN7P/8/" rel="nofollow noreferrer">http://jsfiddle.net/waspinator/fwN7P/8/</a></p>