You are specifying the link move to 1px
from the top of the page in the rule .back:active
(what happens when you click down on an item.)
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active
effects, you need to have the correct specificity (currently a.back:link
rule overrides your color
for :active
, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.