title: Align a pseudo element to the right and vertical center
body: <p>I need the image to appear on the far right and keep the text on the left. I also need to maintain the vertical alignment.</p>
  
  <p>I have tried to float right on the <code>::after</code> pseudo element, but it ruins the vertical alignment. Any ideas?</p>
  
  <p><a href="https://jsfiddle.net/3h71kzxe/" rel="noreferrer">JSFiddle</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>.holder{
      width: 100%;
      background: tomato;
      height: 200px;
      line-height: 200px;
  }
  
  .holder::after{
      content: "";
      border: 1px solid red;
      background: transparent url('my-img.jpg') no-repeat;
      width: 30px;
      height: 30px;
      display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="holder"&gt;
      Section 1
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>