title: How to insert line breaks in HTML documents using CSS
body: <p>I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <code>&lt;div&gt;</code>s or <code>&lt;span&gt;</code>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS. </p>
  
  <p>The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of <code>display: block</code>, but it doesn't really work in the situation I'm trying to handle now - a <code>form</code> with <code>&lt;input&gt;</code> fields. Something like this: </p>
  
  <pre><code>&lt;form&gt;
    Thingy 1: &lt;input class="a" type="text" name="one" /&gt;
    Thingy 2: &lt;input class="a" type="text" name="two" /&gt;
    Thingy 3: &lt;input class="b" type="checkbox" name="three" /&gt;
    Thingy 4: &lt;input class="b" type="checkbox" name="four" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this: </p>
  
  <pre class="lang-css prettyprint-override"><code>input.a:after { content: "\a" }
  </code></pre>
  
  <p>But that didn't seem to do anything. </p>