Floated ::与块级兄弟交互后

Question

我正在进行一项我不太了解的互动。我正在构建一个进度条（严重的是，我们可以实现整个 standard吗？）根据data- *属性显示信息，所以我使用：之前和：之后显示标签。

我有一个小提琴：http://jsfiddle.net/WtrfL/

HTML：

<div class="wrap">
    <div class="inner">
    </div>
</div>

样式：

.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;
}

不幸的是，我遇到了这种情况：

我希望[2]位于主条的内部，而不是在它下面。

我在Windows上的IE9和Chrome 27中看到了相同的行为，所以我很确定这是误解了这些东西的运行方式，而不是渲染引擎中的错误。

那么......怎么了？有任何想法吗？我很擅长黑客，这只是现在的原型。

Answer 1

我从不在伪元素上使用浮点数。我会把它们定位为绝对的。像这样：

.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;
}

我在你的小提琴中测试它看起来很好！ http://jsfiddle.net/WtrfL/1/