This code performs as intended in Chrome, but unfortunately does not function properly in Firefox.
ul {
list-style:none;
}
li {
display:inline-block;
border:1px solid black;
}
a {
display:block;
margin:10px;
}
a:hover {
position:relative;
top:-2px;
color:red;
}
and
<ul>
<li><a href="#">Hi there</a></li>
<li><a href="#">Hi there</a></li>
<li><a href="#">Hi there</a></li>
<li><a href="#">Hi there</a></li>
<li><a href="#">Hi there</a></li>
</ul>
The issue is that in Firefox, instead of moving the text 2 pixels up on hover, it moves the borders down by two pixels. How can this be corrected?
If no solution is available, then please recommend an alternative version that achieves a similar effect on the text within the .