Highlight links wwith background pane bigger than link-object without padding

Highlight links wwith background pane bigger than link-object without padding

http://jsbin.com/OkaC/1/edit

HTML:
<ul>
<li>
<a class='active' href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
CSS:
.active {
background:grey;
border-radius:2px;
padding:4px;
}
This is basic example of what Im trying to achieve - highlighting for
ordinary links with effect that is bigger than link-element itself. Here I
use padding, but it breaks consistency of visual structure of page -
highlighted link is shifted relative to regular one.
Possible solutions that I have in my mind:
Add padding to all links.
With JS, switch active link to absolute positioning with current coordinates.
is there any other solutions?