Why does :before element break layout?

Question

I want to display some background images along with some text. Everything should be divided by a | (pipe) to separate the elements.

The pipe is included with an :before selector with the pipe as content. However it seems that this breaks the layout as the background images are now not longer on the same line as the text. If I remove the content completely it works as expected.

What is the reason for this and how can I fix it?

I've created a small Fiddle as example.

Answer 1

Your layout uses float: left so :before should follow the same rule. For example:

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

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

BTW, Manoj Kumar below has described the real problem. My answer is a possible solution because float: left as well as position: absolute has its own flow.