title: Using the last line of an inline element as the width for :after pseudo element
body: <p>I'm facing an issue that I'm struggling to overcome.</p>
  
  <p>This is best demonstrated with an example I guess:</p>
  
  <p><strong>As a fiddle:</strong> <a href="http://jsfiddle.net/wchv2hmn/3/" rel="nofollow">http://jsfiddle.net/wchv2hmn/3/</a></p>
  
  <p><strong>In the browser:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      background-color: blue;
      text-align: center;
  }
  span {
      position: relative;
      background-color: green;
      
  }
  span:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      height: 10px;
      width: 100%;
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;span&gt;
          htejuteujetjtjehrehreheherhrehrehre sghosgjosjoskoskfosjofshohofshofusofhrehrhrehehhrehrherheheuorfos
      &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need the <code>:after</code> pseudo element to take on the width of the last line of text within the <code>&lt;span&gt;</code>, not the first.</p>
  
  <p>Adding inline-block to the span, results in the text just being displayed as a block level element, as seen here in chrome and Firefox 39:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      background-color: blue;
      text-align: center;
  }
  span {
      position: relative;
      background-color: green;
      display:inline-block;
      
  }
  span:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      height: 10px;
      width: 100%;
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;span&gt;
          htejuteujetjthehtehtehethetje sghosgjosjoskoskfosjofshohofshofusethehetthehehterfos
      &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's as if the <code>&lt;span&gt;</code>s <code>min-width</code> is set to the length the <code>&lt;span&gt;</code> will occupy when all the text fits on one line. So when the window shrinks, and the text splits to occupy two or more lines, the width can't shrink any smaller than it's <em>assumed</em> <code>min-width</code>...</p>
  
  <p>Does anyone have any ideas? Preferably without having to alter the DOM, although it can be done if absolutely necessary.</p>