Styling different depending on HTML markup organization

Question

I have stumbled upon what I feel must be a bug, but it happens in all major browsers, even mobile ones.

Basically, instead of using default li bullets, I am using the :before pseudo-element with the following styling:

ul li {
  margin: 0 0 0 30px;
}
ul li:before {
  content: "\25cf";
  font-family: "FontAwesome";
  color: #969696;
  font-size: 8px;
  margin: 0 10px 0 -20px;
  right: auto;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  display: inline-block;
  position: relative;
  top: -3px;
}

This should indent the content of the li tag 30px and place the bullet character somewhere in the middle of the margin. I have found an instance where the first line of the li content actually invades slightly into the margin. Observe the following screenshot:

Now take a look at the raw markup:

The markup structure for these 4 bullets is pretty much the same. We have opening and closing li tags that completely wrap around the content. We have fully validated HTML throughout the page. The only difference between the broken li tags and the normal ones is that the normal ones have a line break between the opening li tag and the content. That's all.

What is going on here?

Here is a fiddle with this exact scenario summarized: http://jsfiddle.net/9b2929oc/2/

Answer 1

You should position the psuedo elements absolutely, not relative. This way the positioning of the pseudo element doesn't affect the parent element

ul li:before {
    /* ... Your other styles ... */
    position: absolute;
    top: 6px;
}

By positioning them relatively and then using negative margin of course they'll affect the text position as seen in this example, because they're relative to their static position (which a negative margin changes). So if you move one using a negative margin the other will be effected.

It's not a browser bug, this is the way it's supposed to be