CSS. Как выставить ширину li в зависимости от контента?

Собственно вот код примера.

Я хочу сделать так, чтобы при наведение на слово, которое находится внутри , изменялся , который находится внутри того же на одном уровне (в коде) со словом.

Проблема в том, что занимает всю доступную ей ширину и при наведении курсора намного правее слова, эффект тоже работает, а надо чтобы при наведении на само слово.

P.S. слово в находится внутри "a" ссылки. Я пробовал вешать :hover именно на "a", а не на , но тогда эффект вообще не работал.