Question

I need to add the layer under the tag using before/after. But in Opera browser it is wrong calculates the padding property that is attached to a button::after pseudoelement (with other tags it is works good). It is begins to increase only if I will set a much bigger value.

Example http://jsfiddle.net/c8756/ (see in Opera and then in any other browser)

I have tried to set the various display values to both button and ::after elements, but anyway it does not works.

Is there any ways to fix the bug in Opera without touching of HTML?

Thanks

Answer 1

See http://codepen.io/morewry/pen/rJmCg. Remove display, width, and height and add right and bottom.

a::after,
button::after {
    content:"";
    padding:6px;
    position:absolute;
    left:-6px; top:-6px; right: -6px; bottom: -6px;
    z-index:-1;
}

Technique as http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Note that replaced elements (which includes most form elements), br, hr, and img aren’t going to play nice with ::before and ::after.