css - Element with padding moving on hover -

css - Element with padding moving on hover -

i have a element. on hover adding outline , outline offset , additional padding. problem element moves on hover.

html

<a href="javascript:void(0)" class="link">test</a>

css

.link { display: inline-block; // margin: 1px 1px; } .link:hover { outline: 0.125rem dotted red; color: black; outline-offset: -1px; padding: 1px 1px; // margin: 0; }

http://jsfiddle.net/5pbk9djp/116/

the 2 ways have found are:

margin on normal state equal padding on hover , margin 0 on hover the padding on normal state, not on hover

i not first scenario. if have no other choice, go second.

any ideas else?

the padding on normal state fine, alternative way utilize negative translatex , translatey, e.g.

.link:hover { ... padding: 1px 1px; -webkit-transform: translate(-1px, -1px); -moz-transform: translate(-1px, -1px); -o-transform: translate(-1px, -1px); transform: translate(-1px, -1px); }

2d transformation well supported (even ie9)

example: http://jsfiddle.net/5pbk9djp/117/

css