title: CSS :before float itself floats
body: <p>I have markup something like:</p>
  
  <pre><code>&lt;label/&gt;&lt;input/&gt;&lt;label/&gt;&lt;input/&gt;
  </code></pre>
  
  <p>And want to float the labels to the left of the inputs with a width on the labels. If the label text wraps, I would like it to push down the next label and input.</p>
  
  <p>The solution I am trying to use runs like this</p>
  
  <pre><code>label { float: left; clear: left; width: 25% }
  label:before { content: " "; display: block; float: none; clear: left; }
  </code></pre>
  
  <p>However this does not work.  In fact, if I replace the " " with "a" I can see that the generated content in the :before is acting like it is float:left, even with the float:none on there!</p>
  
  <p><strong>EDIT</strong> I'm mostly trying to understand <em>why</em> the above CSS behaves the way it does.  Any pure-CSS solutions would be cool as well, but I'm not looking to style by changing markup :)</p>
  
  <p>A demonstration of the problem is at <a href="https://singpolyma.net/so-5080542.html" rel="nofollow">https://singpolyma.net/so-5080542.html</a> you can see the red "see here" text is floating to the left with the label, instead of clearing everything and being on a line by itself like I would expect.</p>
  
  <p>Any ideas?</p>