À l'aide avant et après les pseudo-éléments sur l'image d'arrière-plan

Je suis désireux de construire des éléments de navigation à partir de trois (arrière-plan) des images, avec la première et la dernière une largeur fixe, et la centrale de largeur variable, en fonction de la largeur du texte dans la valeur liquidative de l'élément. J'ai été amené à croire que l'utilisation de la pseudo-éléments avant et après la serait la meilleure méthode. Quand j'ai essayer ce que, le principal (central) image d'arrière-plan pour la nav élément est le chevauchement avec l'avant et après les images d'arrière-plan.

Vous pouvez voir ce que je veux dire sur cette page.

Voici le CSS:

.box {
   background-image: url(nav/images/nav_02.png);
   background-repeat: repeat;
   height:20px;
   position: absolute;
   padding: 10px 13px;
}


.box:before {
    left: 0;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: 0;
    background-image: url(nav/images/nav_03.png);
}

.box:before,
.box:after {
    content: ' ';
    width: 13px;
    height:40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

Et le code HTML:

<div class="box">here is some text</div>

Puis-je utiliser le fond d'images de cette façon, en utilisant des éléments pseudo?

Merci,

Nick

OriginalL'auteur Nick | 2012-06-03