Expand clickable area of anchor without affecting position with CSS -

in mobile web application have created there many anchor tags used throughout. anchor tags default have clickable area purely surrounding text. looking try , expand area without affecting position of anchor tag @ all.

the black border shows current clickable area , red border shows clickable area prefer. first thing think of add padding, moves tag whole reason i'm asking problem. how can expand clickable area of anchor tags in application without affecting positions?

you can use absolute positionned pseudo element increase space link stands. basic demo:

a {   display:inline-block;   position:relative;   border:solid; } a:before {   content:'';   position:absolute;   top:-1em;   left:-1em;   right:-1em;   bottom:-1em;   border:solid red; } 

this technique can usefull menus close because submenu on edge.