title: How to place "open a remote URL" image after link
body: <p>I have a background image to indicate that, when clicking a URL, the user will leave the site:
  <code>{background-image:url('/static/image/open_new.svg')}</code></p>
  
  <p>The <code>open_new.svg</code> is 24x24</p>
  
  <p>My links are formatted using <code>&lt;ol&gt;&lt;li&gt;</code>.</p>
  
  <p>I want to place the background-image after links; and my links have variable lengths.</p>
  
  <p>On hover, this CSS steps on the end of the link:</p>
  
  <p><code>ol li.external a {background:no-repeat; background-position: left 100% center; }</code></p>
  
  <p><code>ol li.external:hover a {background-image:url('/static/image/open_new.svg')}
  </code></p>
  
  <p>This CSS opens a space between the <code>&lt;li&gt;</code> and the link, and exposes the background-image on hover in the opened space:</p>
  
  <p><code>ol li.external a {background:no-repeat; background-position: left 100% center; padding:30px; }</code></p>
  
  <p><code>ol li.external:hover a {background-image:url('/static/image/open_new.svg')}</code></p>
  
  <p><strong>What CSS will place the <code>background-image</code> several px to the right of a variable length link?</strong></p>