Как изменить стиль ссылки c border-bottom в li с паддингом, при наведении мыши на область паддинга?

Question

[dimmone]

Имеется ссылка с подчеркиванием:

При наведении мышью, должно быть так:


То есть, вокруг ссылки должен быть отступ, при наведении на который, должна работать ссылка. При этом в спокойном состоянии у ссылки должно быть подчеркивание.

Подчеркивание делаю через border-bottom.
Если задать padding на саму ссылку, тогда border оказывается по краям паддинга.

Пытаюсь сделать через li с паддингом. Например:

<style>
li { padding: 15px; }
a { border-bottom: 1px solid #000; color: #000; text-decoration: none;}
li:hover { background-color: #000; }
a:hover { border: 0; color: #fff; }
</style>

<li>
<a href="#">ССЫЛКА</a>
</li>

Но тогда :hover для ссылки срабатывает только при наведении на саму ссылку.
А нужно, чтобы срабатывал при наведении на li.

Как это правильно реализовать?

Answer 1

[dimmone]

Решается тупо через span. Ночной затуп :|