title: Div with CSS content, after pseudo element is not visible
body: <p>I have a POC that I have to complete and I am only allowed to use CSS to update the styles of a product.  I have replaced one of the images of the product with a logo by using the CSS content attribute.</p>
  
  <p>I have to add a simple string with a phone number to be shown after this logo.  I have tried to use the <code>:after</code> pseudo-element to do this.  This works only if the content of the <code>div</code> is empty (logo is removed).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.demo {
    content: url('http://placehold.it/350x150')
  }
  
  .demo:after {
    content: 'test';
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried changing the <code>display</code> to <code>inline-block</code> and hard coding the <code>height</code>and <code>width</code> for both rules.  Essentially everything I could find.  Any help would be greatly appreciated.  </p>
  
  <p>JSFiddle here:  <a href="https://jsfiddle.net/qykbjznm/" rel="noreferrer">https://jsfiddle.net/qykbjznm/</a></p>