title: Using content with the before psuedo selector to force new line
body: <p>Normally something like this will force the <code>.free-entry</code> element onto a new line...</p>
  
  <pre><code>.free-entry:before {
      content: '\A';
      white-space: pre;
  }
  </code></pre>
  
  <p>But I've run into a case where I can't get it to work. </p>
  
  <p>I have an unordered list and within each <code>li</code> there is a <code>.free-entry</code> element. I'm trying to force the <code>.free-entry</code> element onto a new line but with no luck... </p>
  
  <pre><code>li .free-entry:before {
      content: '\A';
      white-space: pre;
  }
  </code></pre>
  
  <p>Normally <code>display:block</code> would work just fine, but <code>li</code> is <code>display:table-row</code> so block doesn't work.</p>
  
  <pre><code>li {
      display:table-row;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/bflemi3/1dy0a41w/" rel="nofollow">fiddle</a> for more clarity.</p>