title: Modify pseudo-element :after's width using javascript
body: <p>Markup:</p>
  
  <pre><code>&lt;h1 class="title"&gt;Hello World&lt;/h1&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.title {
    border-bottom: 3px solid #aaa;
    position: relative;
  }
  .title:after {
    content: "";
    width: 100px;
    border-bottom: 3px solid red;
    display: block;
    position: absolute;
  }
  </code></pre>
  
  <p>Demo: <a href="http://codepen.io/anon/pen/HDBqe" rel="noreferrer">http://codepen.io/anon/pen/HDBqe</a></p>
  
  <p>I wanted to change the <code>.title:after</code>'s width based on the text's width, how do I change <code>:after</code>'s width using javascript?</p>
  
  <pre><code>$.fn.textWidth = function(){
    var html_org = $(this).html();
    var html_calc = '&lt;span&gt;' + html_org + '&lt;/span&gt;';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
  };
  
  $('.title').each(function(){
    // Change :after's width based on the text's width
    // .css('width', $(this).textWidth());
  });
  </code></pre>