Styling different depending on the organization of the HTML markup

Question

I stumbled on what, in my opinion, should be a mistake, but this happens in all major browsers, even mobile ones.

Basically, instead of using the default bullet, I use: before the pseudo-element with the following style:

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 retreat from the contents of the li 30px tag and place the marker character somewhere in the middle of the field. I found an instance in which the first line of content li actually invades the field a bit. Observe the following screenshot:

Now take a look at the raw markup:

The markup structure for these 4 bullets is the same. We have opening and closing li tags that completely wrap the contents. We have fully performed HTML validation throughout the page. The only difference between the broken li tags and the normal ones is that the regular ones have a line break between the li opening tag and the content. It's all.

What's going on here?

Here is a script with such an exact script: http://jsfiddle.net/9b2929oc/2/

Answer 1

You should fully position psuedo elements , not relative ones. Thus, the positioning of the pseudo-element does not affect the parent element

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

Putting them relatively, and then using a negative margin, they will affect the text position as shown in this example , since they are relative to their static position (with a change in the negative field). Therefore, if you move one using a negative margin, then the other will be executed.

This is not a browser error, so it should be