title: HTML/CSS - Change button to point in oposite direction
body: <p>I have this awesome button from the Internet, which has a feature to display an arrow facing to the right. Now, I have another button, which goes to a previous page, so common sense would say that the arrow on the button should point to the left.</p>
  
  <p>So I changed all the values which have to do with right-animation to a value for a left-animation, but it doesn't quite work.</p>
  
  <p>I don't understand this quite enough, that's why I'm asking if someone with a better understanding of this can help me out.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    width: 200px;
  }
  .button &gt; span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  .button &gt; span:after {
    content: ' »';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  .button:hover &gt; span {
    padding-right: 25px;
  }
  .button:hover &gt; span:after {
    opacity: 1;
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class='button'&gt;&lt;span&gt;Back&lt;/span&gt;
  &lt;/button&gt;
  &lt;button class='button'&gt;&lt;span&gt;Again&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have this CSS in a <code>common.css</code> which defines a 'standard' button, and in the stylesheets of the page where this HTML is found, it changes some of the CSS (so here the change for my problem must be made) to fit the page's need.</p>
  
  <p>CSS:</p>
  
  <pre><code>li:last-child .button {
      width: 200px;
      font-size: 22px;
      padding: 13px;
  }
  </code></pre>
  
  <p>If anyone could help me out here , I'd be very pleased.</p>
  
  <p>Cheers'</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The <code>.button</code> in the <code>common.css</code> has also an width property.</p>