title: CSS selector and content property to add a space character between two inline-block elements
body: <p>I have a series of <code>span</code> elements of class <code>tag</code> (from bootstrap v4) which are adjacent to each other without any space between them because they come from a reacj.js array of JSX elements :</p>
  
  <pre><code>&lt;span class="tag tag-primary"&gt;text&lt;/span&gt;&lt;span class="tag tag-primary"&gt;text&lt;/span&gt;&lt;!-- ... --&gt;
  </code></pre>
  
  <p>This is the CSS from bootstrap:</p>
  
  <pre><code>.tag {
      display: inline-block;
      padding: 0.25em 0.4em;
      font-size: 75%;
      font-weight: bold;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25rem;
  }
  </code></pre>
  
  <p>These elements can wrap over several lines in a table cell. I could add a space character in-between painfully with some javascript (<a href="https://stackoverflow.com/a/23619085/3446439">https://stackoverflow.com/a/23619085/3446439</a>), or add a wrapping element (to have only one root element in the JSX) with a space character. Both these options don't satisfy me and I figured it should be simple to do it in CSS.</p>
  
  <p>I tried the following, which would be ideal if it worked, but it doesn't with inline-block elements (<a href="https://jsfiddle.net/qjbgzzLr/" rel="nofollow noreferrer">https://jsfiddle.net/qjbgzzLr/</a>) :</p>
  
  <pre><code>span.tag + span.tag::before {
      content: " ";
  }
  </code></pre>
  
  <p>For now, I put a <code>margin-left</code> on <code>span.tag + span.tag</code> but this is <strong>not ideal</strong> since the first element in every line has a margin to its left.</p>
  
  <p>Is there a way to achieve this with <strong>CSS only</strong> ?</p>