Floated ::after interacting with block-level sibling - html

Question

I'm having an interaction that I don't quite understand. I'm building a progress bar (seriously, can we have the entire standard implemented yet?) that displays info based off of data-* attributes, so I'm using :before and :after to display the labels.
I've got it in a fiddle: http://jsfiddle.net/WtrfL/
HTML:
<div class="wrap">
<div class="inner">
</div>
</div>
Styles:
.wrap {
width:500px;
height:2em;
border:1px solid black;
}
.wrap:before {
content:"1";
float:left;
border:1px solid black;
}
.wrap:after {
content:"2";
float:right;
border:1px solid black;
}
.inner {
width:30%;
height:100%;
background-color:#DDD;
border:1px solid #888;
}
Unfortunately, I'm having this happen:
I'd expect the [2] to be inside of the main bar, not underneath it.
I'm seeing the same behavior in IE9 and Chrome 27 on Windows, so I'm pretty sure this is me misunderstanding the way these things are supposed to work, not a bug in a rendering engine.
So... what's up? Any ideas? I'm good with a hack, this is just a prototype for the present.

Answer 1

I never use floats on pseudo elements. I would position them absolute. Something like this:
.wrap {
width:500px;
height:2em;
border:1px solid black;
position: relative;
}
.wrap:before {
content:"1";
position: absolute;
left: 0;
top: 0;
border:1px solid black;
}
.wrap:after {
content:"2";
position: absolute;
right: 0;
top: 0;
border:1px solid black;
}
I tested it in your fiddle and looks fine! http://jsfiddle.net/WtrfL/1/