CSS transition rotate is only working when div is floated left

Question

I'm using an accordion with a › for the arrow to open and close it. It points down when the accordion is closed and up when the accordion is open.

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.

Margin 0 auto doesn't work because it's floated left, but when it's not floated left, the arrow is not pointing down. Any ideas?

Here are the two Fiddles:

.accordionTitle:before floating left:
http://jsfiddle.net/Clare12345/tfooswzq/ Works

.accordionTitle:before {
float: left;
}

.accordionTitle:before float none: http://jsfiddle.net/Clare12345/dqcv9svt/ Doesn't work

.accordionTitle:before {
float: none;
}

The float left is the only difference. Thank you ahead of time!!!

Answer 1

Just ran into this myself. Since I see you have written the answer in a comment, I'll go ahead and post an actual answer, which is...

Set the display for the element to be inline-block. That is:

display: inline-block;

Seemed to work for my situation at least.