title: Create Left Arrow with CSS before & after pseudo elements
body: <p>I have created a right arrow.</p>
  
  <p>How do I flip this to have a 2nd left arrow?</p>
  
  <p><a href="http://jsfiddle.net/n0rxtr48/" rel="noreferrer">http://jsfiddle.net/n0rxtr48/</a></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>a {
      display: inline-block;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      padding: 10px 15px 10px 10px;
      position: relative;
      text-decoration: none;
  }
  
  a:before, a:after {
      border-right: 2px solid;
      content: '';
      display: block;
      height: 8px;
      margin-top: -6px;
      position: absolute;
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      right: 10px;
      top: 50%;
      width: 0;
  }
  
  a:after {
      margin-top: -1px;
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  a:hover, a:focus,
  a:hover:before, a:hover:after,
  a:focus:before, a:focus:after {
      color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="arrow"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>