CSS sliding underline on hover - color transition does not work on a visited link

Question

I created a navigation that underlines the links on hover (sliding underline starting from the middle going outward) and also transforms the link from a dark green to a lighter green. This works totally fine except when one of the links has been clicked on and it becomes a "visited" link: when I re-click a visited link the sliding underline still works but the color will not transform from dark to light green, it just stays as dark green. I've tried everything I can think of but can't get a visited link to transform it's color like a non-visited link.

HTML:

<div id="topNavigation">
    <ul>
        <li><a href="encyclopedia.html">ENCYCLOPEDIA</a></li>
        <li><a href="journal.html">JOURNAL</a></li>
        <li><a href="society.html">SOCIETY</a></li>
        <li><a href="about.html">ABOUT</a></li>
    </ul>
</div>

CSS:

#topNavigation a:link {
    font-family:"Quicksand-Regular", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    position:relative;
    color:#00590d;
    text-decoration:none;
    transition:color .35s;
    -webkit-transition:color .35s;
}

#topNavigation a:hover {
    color:#7ead34;
}

#topNavigation a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #7ead34;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

#topNavigation a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#topNavigation a:visited {
    color:#00590d;
    text-decoration:none;
}

You can see what I'm talking about here: http://www.religionandnature.com/website2015/

The link for the Encyclopedia page is visited and the color doesn't transition. The other links aren't visited and work fine. Any suggestions appreciated.

maybe try using RGB instead of hex. – Dan Beaulieu Apr 21 '15 at 01:24 — Dan Beaulieu, Apr 21 '15 at 01:24

misterManSam · Answer 1 · 2015-04-21T01:57:33.800

Currently the :visited declaration is underneath :hover. This means that the :visited color will always override the hover color.

Use the LVHA order — link, visited, hover, active!

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.

The hover color will now override the visited color.

Like this:

#topNavigation a:link {}
#topNavigation a:visited {}/*Place before :hover*/
#topNavigation a:hover {}
#topNavigation a:before {}
#topNavigation a:hover:before {}

YES!! Thank you so much. The ORDER of CSS will drive me nuts all the time. Works perfectly now. — Daniel Whittaker, Apr 21 '15 at 18:26

CSS sliding underline on hover - color transition does not work on a visited link

1 Answers1