Html 为什么在span之前的psuedo类会导致span向下移动

嗨，我想买三个带标签的文本框。第三个文本框将是前两个文本框的总和

标签{
显示：块；
}
跨度{
浮动：左；
右边距：50px；
}
输入{
宽度：50px；
}
#总数：前{
内容：“=”；
位置：相对位置；
顶部：21px；
左：-34px；
}

极客
书呆子
全部的

小提琴：

---

可以做到这一点。

文档流中仍然存在

之前的
元素。仅
float:left/right
和
position:absolute/fixed
从流中取出一个元素。只需添加一个
float:left
属性即可将其从流中移除。实际位置仍由
位置
属性控制


标签{
显示：块；
}
跨度{
浮动：左；
右边距：50px；
}
输入{
宽度：50px；
}
#总数：前{
内容：“=”；
位置：相对位置；
浮动：左；
顶部：21px；
左：-34px；
}

极客
书呆子
全部的
使用
浮动：左
label {
    display:block;
}
span {
    float:left;
    margin-right: 50px;
}

input {
    width:50px;
}

#total:before {
    content: "=";
    float: left;
    position: relative;
    top: 21px;
    left: -34px;
}

#total:before {
content: "=";
position: absolute;
top: 21px;
left: -34px;
} 
#total{
position: relative;
}