html - 为什么:before element break layout?

Question

我想显示一些背景图像和一些文本。一切都应该用 |(管道)分隔以分隔元素。

管道包含在 :before 选择器中，管道作为内容。 然而，这似乎打破了布局，因为背景图像现在不再与文本位于同一行。如果我完全删除内容，它会按预期工作。

这是什么原因，我该如何解决？

我创建了一个小的 Fiddle as example .

Answer 1

您的布局使用 float: left 所以 :before 应该遵循相同的规则。例如:

.list-piped:before {
    display: block; /* fix */
    float: left; /* fix */
    content: "|"; /* This breaks the layout */
}

https://jsfiddle.net/infous/1cbeyn84/4/

顺便说一句，下面的 Manoj Kumar 描述了真正的问题。我的回答是一个可能的解决方案，因为 float: left 和 position: absolute 都有自己的流程。