evitar desplazamiento debido a efecto

[daviss]

Esto:

ThisXtextXisXaXtestXtext

es el resultado del código de abajo; al pasar el mouse por la "X" mayúscula este se resalta pero, este efecto de "resaltado" provoca que el resto del texto se desplace, quiero evitar ese desplazamiento.

Código HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div><span>This text is a test text</span></div>
<style>
span{
    font-size:15pt;
}
</style>
<script>
$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/ /g, "<span>X</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66');
		$(this).css('padding-left',  '15px');
		 $(this).css('padding-right',  '15px');
		$(this).css('border', '1px solid black');
    },
    function() { 
        $(this).css('background-color','');
        $(this).css('padding-left',  '0px');
        $(this).css('padding-right',  '0px');
        $(this).css('border', '0px');
    }
);


</script> 

Lo que busco es que la "X" no se mueva y el efecto tape su derecha e izquierda
Muchas gracias de antemano.