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 example showcases my attempt at highlighting regular links with an effect that extends beyond the link itself. Using padding achieves the desired effect, but it disrupts the visual consistency of the page structure as the highlighted link appears shifted compared to the regular link.
My current ideas for possible solutions are:
- Apply padding to all links.
- Use JavaScript to switch the active link to absolute positioning with its current coordinates.
Are there any other solutions that could be considered?