title: How to avoid line breaks after ":before" in CSS
body: <p>On my website I'm using font icons for certain link types. These icons are added via <code>:before</code> CSS syntax.</p>
  
  <pre><code>a.some-link:before {
    font-family: icons;
    display: inline-block;
    padding-right: 0.3em;
    content: 'x';
  }
  </code></pre>
  
  <p>However, when this link is at the beginning of a line, it's sometimes separated from its icon:</p>
  
  <p><img src="https://i.stack.imgur.com/wX9IJ.png" alt="Separated icon from link"></p>
  
  <p>I tried adding <code>white-space: nowrap</code> to the CSS rule above but that didn't help.</p>
  
  <p><strong>How do I keep the icon and the text together?</strong> (CSS 3 is okay)</p>
  
  <p>Note: I don't want to format the <em>whole</em> link with <code>white-space: nowrap</code>.</p>