javascript - 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 basic example of im trying achieve - highlighting ordinary links effect bigger link-element itself. here use padding, breaks consistency of visual structure of page - highlighted link shifted relative regular one.
possible solutions have in mind:
- add padding links.
- with js, switch active link absolute positioning current coordinates.
is there other solutions?
you can add negative margin remove space around link:
a { padding: 4px; margin: -4px; }
other way add outline instead of padding:
a { outline: 4px solid grey; }
Comments
Post a Comment