title: how do my position my ::after content to always be at the inside end of the <a>?
body: <p>i have the following</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='button'&gt;
      &lt;a href=''&gt;My Link&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#button a {
      display: block;
      background-color:#FF0000;
      width:250px;
      text-align:center;
  }
  
  #button a::after {
      content: " \25b6";
      color:#000000;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mdn7byfc/" rel="nofollow">jsfiddle</a></p>
  
  <p>Now as you can see from the jsfiddle link i have a black triangle at the end of the text of my <code>&lt;a&gt;</code> but what i want is for it to be at the end of the inside of the <code>&lt;a&gt;</code> (within the red) so that should the box re-size the triangle will move along with the end and ideally for it to be vertically aligned to the middle for <a href="http://jsfiddle.net/mdn7byfc/3/" rel="nofollow">multiple lines</a></p>
  
  <p>I have tried applying <a href="https://jsfiddle.net/mdn7byfc/1/" rel="nofollow">an <code>::after</code> to the div</a> and applying the styles <a href="https://jsfiddle.net/mdn7byfc/2/" rel="nofollow">to the <code>&lt;div&gt;</code> instead of the <code>&lt;a&gt;</code></a> to no avail so i am wondering what i am missing here.</p>