Estoy tratando de crear un botón con "mayúsculas" en cada extremo y un fondo que se repite, para mantener el botón en un tamaño flexible.

Para hacer esto, he usado el:before y:after pseudo-elementos en CSS, junto conposition:absolute para obtenerlo fuera del espacio cubierto por el fondo del botón principal (usando valores negativos).

Funciona en FF y Chrome, pero parece que en IE8 y 9, las imágenes están ahí, pero están "fuera" del botón y, por lo tanto, están ocultas. ¿Alguien sabe cómo sacar estos pseudo-elementos "fuera" del botón, para que se procesen?

Quiero mantener el HTML parasólo la<button></button> elemento, y estoy usando SASS. Puedes ver un jsFiddle aquí:http://jsfiddle.net/Dqr76/8/ o el siguiente código:

button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border:0;
    background-image: url(../images/btn_bg.png);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    position: relative;
    margin: 0 5px;
    vertical-align: top;

    &:before {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_left.png);
        width: 5px;
        position: absolute;
        left: -5px;
        top: 0;
        content: "";
    }

    &:after {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_right.png);
        width: 5px;
        position: absolute;
        right: -5px;
        top: 0;
        content: "";
    }
}

Solo una nota al margen, antes de que alguien lo mencione, sé que estos pseudo-elementos no funcionan en <IE8, y han creado una solución que no está afectando este problema.