Как остановить перемещение текста при наведении курсора при изменении толщины шрифта? ⇐ CSS

[Anonymous]

Как остановить перемещение текста при наведении курсора при изменении толщины шрифта?
Мой стандартный имеет толщину шрифта: 300 затем при наведении курсора мыши изменяется на шрифт: 700, и это приводит к перемещению текста. Как это исправить?
ДЕМО КОДОВОГО ПЕРА

Код: Выделить всё

    .clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {
display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* close commented backslash hack */
ul {
list-style-type: none;
padding: 0;
margin: 0;
background: #c2c2c2;
font-family: 'Roboto Slab', serif;
}
ul li {
float: left;
display: block;
border-left: 1px solid #eeeff2;
}
ul li a {
text-decoration: none;
font-size: 25px;
display: block;
padding: 20px;
font-weight: 300;
}
ul li a:hover {
font-weight: 700;
}

Код: Выделить всё

   [list]
[*]Testing 1
[*]Testing 2
[*]Testing 3
[*]Testing 4
[/list]

Подробнее здесь: https://stackoverflow.com/questions/341 ... ont-weight