With this CSS:
li { margin-top: -1px; }
li:before { content: "x"; float:left; }
under <!doctype html>, a standard <ul> list shows a shifted pattern:
Why?
Removing margin-top: -1px; or making it positive cancels the effect: the list is shown normally.
Here is a jsfiddle. I checked in FireFox, Chrome, IE.
The list was
<ul>
<li>y</li>
<li>y</li>
<li>y</li>
</ul>
Note: my question is not how to avoid it, but why it happens -- to understand how CSS works.