title: pure css solution to add some text
body: <p>I'm trying to add text in this structure with pure css:</p>
  
  <pre><code>&lt;div&gt;&lt;i&gt;&lt;/i&gt;world!&lt;/div&gt;
  </code></pre>
  
  <p>so it would look like </p>
  
  <pre><code>&lt;div&gt;&lt;i&gt;&lt;/i&gt;Hello, world!&lt;/div&gt;
  </code></pre>
  
  <p>on the page.
  The <a href="http://jsfiddle.net/RbLRA/" rel="nofollow noreferrer">jsFiddle</a> example contains this css style:</p>
  
  <pre><code>div{
      border:1px solid red;
      margin-top:20px;
      margin-left:20px;
  
  }
  i {
      display: inline-block;
      width: 48px;
      height: 48px;
      background-image: url("http://png-.findicons.com/files/icons/1688/web_blog/48/pencil_small.png");
      border:1px solid green;
  }
  </code></pre>
  
  <p>My bad solution is to add:</p>
  
  <pre><code>i:after {
  content: "Hello, ";
  }
  </code></pre>
  
  <p>but it doesn't put the text "Hello, " where I actually want and the style from <code>i</code> applied.
  So, is there any way to add <code>Hello,</code> right in front of another text with the same style?</p>
  
  <p><strong>Please only css solution.</strong>
  Thank you.</p>
  
  <p>P.S. And here is  <a href="http://jsfiddle.net/RbLRA/1/" rel="nofollow noreferrer">my bad solution @ jsFiddle</a></p>
  
  <p>It should be like this:
  <img src="https://i.stack.imgur.com/eXQQB.png" alt="enter image description here"></p>