: avant,: après et rembourrage

J'ai le code css suivant-code:

.readMore:before {
    content: '';
    display: block;
    float: left;
    width: 10px;
    height: 27px;
    margin: 0;
    background: red url('images/button.png');
    background-position: 0 0;
}

.readMore {
    float: left;
    height: 24px;
    background: url('images/button.png');
    background-position: -10px 0;
    border: 0;
    margin: 0;
    padding: 4px 0 0 0;
    cursor: pointer: 
}

.readMore:after {
    content: '';
    display: block;
    float: right;
    width: 10px;
    height: 27px;
    margin: 0;
    top: -3px;
    background: red url('images/button.png');
    background-position: -411px 0;
}

De styles d'un lien qui ressemble à ceci:
: avant,: après et rembourrage

Mais lorsque j'essaie de modifier le texte dans la .readMore à la verticale dans le :before et :after images également obtenir des "sauts" vers le bas. Ce qui est logique, mais est-il une solution de sorte qu'elle corresponde mieux à la "le total de l'image"?

source d'informationauteur JohnSmith