title: Responsive progress bar indicator with css arrow trick cross browser compatibility
body: <p>I have found a preaty good solution to making a progress bar indicator here:</p>
  
  <pre><code>&lt;ul class="progress"&gt;
     &lt;li class="active"&gt;&lt;a href=""&gt;Qualify&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Develop&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Propose&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Close&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>ul.progress li.active {
    background-color: #dc9305;
  }
  
  ul.progress li {
    background-color: #7e7e7e;
    position:relative;
    text-indent:0.5em;
  }
  ul.progress li:after {
    content:'';
    position:absolute;
    right:100%;
    margin-right:0.4em;
    width:1.2em;
    padding-top:1.2em;;
    border:solid white;
    z-index:1;
    transform:rotate(45deg);
    border-bottom:0;
    border-left:0;
    box-shadow:5px -5px 0 3px  #7e7e7e
  }
  ul.progress li.active:after {
    box-shadow:6px -6px 0 3px #dc9305;
  }
  ul.progress {
    list-style: none;
    margin: 0.5em;
    padding: 0;
    overflow:hidden;
    white-space:nowrap
  }
  
  ul.progress li {
    display:inline-block;
    line-height: 20px;
    height: 20px;
    min-width: 130px;
    position: relative;  
    transition:min-width 0.5s;
  }
  
  
  ul.progress li a {
    padding: 0px 0px 0px 6px;
    color: #FFF;
    text-decoration: none;
  }
  ul.progress li:hover {
    min-width:300px;
  }
  ul.progress li:before {
    content:'\2714'
  }
  ul.progress li.active:before,
  ul.progress li.active ~ li:before {
    content:''
  }
  </code></pre>
  
  <p>You can find the source here:
  <a href="http://codepen.io/gc-nomade/pen/FnKim/" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p>I made this code responsive and its working fine if you change display: block to display: tabel and table-cell for li elements. </p>
  
  <p>My problem with CSS shadow arrow trick. Its broking on Safari and Mozilla. Have you got any idea to solve this? </p>