Question

Looking at this demo, you will see that all browsers, except Opera, position the icon on the middle line of letter ‘A’, but Opera positions it slightly higher and over the line. The difference is not much noticeable here, but in some other cases it is.

What may be the reason for this behavior, and how may it be fixed?

Answer 1

Explanation

It seems that, although Opera is currently handling fine with either inline-block vertical alignment or line-height definitions for pseudo elements (see reference tests for the former and the later to compare the rendering across UAs), the differentiation lies within the sizing definitions of replaced elements;

As can be seen by examining a striped down demo on different browsers, solely having a replaced element (generated be the pseudo element’s content URL value) affects the layout such as the replaced element’s dimensions are added to the containing elements’ (in Opera). This results in the bizarre side effect you’re witnessing as, for now, the spec leaves it for the UA’s interpretation to decide how to treat those dimensions:

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

Suggested Solution

Sidestep the issue to avoid tackling undefined behaviors, and use a more standard method of positioning pseudo elements; utilize absolute positioning:

CSS

.icon {
    /* absolute positioning - parent container */
    position: relative;
    /* layer adjustments for the background image */
    z-index: 1;
    padding-left: 24px;
}
.icon:before {
    content: '';
    /* absolute positioning - child element */
    position: absolute;
    /* layer adjustments for the background image */
    z-index: -1;
    display: block;
    width: 24px;
    height: 24px;
    /* vertically align */
    top: 50%;
    left: 0;
    /* compensate for vertical offset due to element's own height */
    margin-top: -12px;
    background-image: url('http://utdallas.docutek.com/eres/images/icon_arrow.gif');
}

Live Demo

• The updated jsFiddle

References

• Generated content – :before and :after pseudo elements on W3C.
• Visual formatting model on W3C.
• vertical-align on Mozilla Developer Network.
• display on Mozilla Developer Network.

Further Reading

• CSS background image hacks by Nicolas Gallagher.