title: CSS: Display icon next to text of link on mobile sizes
body: <p><a href="https://jsfiddle.net/aerra/0og26caj/49/" rel="nofollow noreferrer">FIDDLE</a></p>
  <p>I want to show an icon next to all links. <strong>It's important to note that I am limited to CSS, so I cannot change the HTML structure</strong>. I guess a JS solution could work, but seems over the top? I'm hoping there's another CSS solution I just haven't thought about.</p>
  <p>I am using <code>inline-block</code> on an <code>&lt;a href=&quot;/&quot;&gt;</code>, and I am adding an <code>:after</code> element on it, which is supposed to be an icon.</p>
  <p>On bigger screen sizes the links are fine. However, on mobile, you can see that the <code>&quot;download here a pdf...&quot;</code> link is being cut off from the text and the link is not at the end of text.</p>
  <p>I realise <em>why</em> this is happening: The link has <code>inline-block</code> and the <code>:after</code> element has <code>position: absolute; right: 0;</code>.</p>
  <p>What I'm having trouble with is figuring out <em>how</em> to approach this differently so that the link stays <code>inline</code> while also having a space to the right in order show the icon.</p>
  <p><a href="https://i.stack.imgur.com/wHcsm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wHcsm.png" alt="enter image description here" /></a></p>