title: CSS transition rotate is only working when div is floated left
body: <p>I'm using an accordion with a &rsaquo; for the arrow to open and close it. It points down when the accordion is closed and up when the accordion is open.</p>
  
  <p>The arrow only points left when the div .accordionTitle:before is floated left. I can't float it left because I need it to be centered, and when I center it it is too long (I want to shorted it because it is rotated via CSS transform 90 degrees) and gets in the way of the button above it. </p>
  
  <p>Margin 0 auto doesn't work because it's floated left, but <strong>when it's not floated left, the arrow is not pointing down</strong>. Any ideas? </p>
  
  <p>Here are the two Fiddles: </p>
  
  <p><em>.accordionTitle:before floating left:</em><br>
  <a href="http://jsfiddle.net/Clare12345/tfooswzq/" rel="nofollow">http://jsfiddle.net/Clare12345/tfooswzq/</a> <strong>Works</strong></p>
  
  <pre><code>.accordionTitle:before {
  float: left;
  }
  </code></pre>
  
  <p><em>.accordionTitle:before float none:</em> 
  <a href="http://jsfiddle.net/Clare12345/dqcv9svt/" rel="nofollow">http://jsfiddle.net/Clare12345/dqcv9svt/</a>  <strong>Doesn't work</strong></p>
  
  <pre><code>.accordionTitle:before {
  float: none;
  }
  </code></pre>
  
  <p>The float left is the only difference. Thank you ahead of time!!!</p>