Underline CSS Animation stop on active page

Question

The animation works great, what I want to know is how to keep the underline on the active page that I am on. So for example. This would be the 'work' page.

This bit of text I actually have to write as it won't let me post without rambling a little more even though it is a simple question. This is very frustrating. Ramble, ramble some more.

#Nlink {
      float: right;
      position: relative;
      margin-left: 46px;
      text-align: right;
      color: #2e33ff;
}
#Nlink > a {
      text-decoration: none;
      color: #2e33ff;
}
#Nlink > a:hover {
      color: #2e33ff;
}
#Nlink > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      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;
}
#Nlink > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

<div id="Ncontainer">
  <div id="Ncontain">
    <div id="Nlogo">
    </div>
    <div id="Nmenu">
      <div id="Nlink"><a href="url">Contact</a>
      </div>
      <div id="Nlink"><a href="url">About</a>
      </div>
      <div id="Nlink"><a href="index.html">Work</a>
      </div>
    </div>
  </div>
</div>

Answer 1

Like so:

First, add a class to that element when you're on the page, you can do it via javascript even.

Example

var nav_items = document.querySelector("#Nlink a");
for (var i=0,l=nav_items.length;i<l;i++) {
   if(nav_item.href === window.location) {
      nav_item.className += " active";
   }
}

Then you just add a second rule to match your block for :hover/:before rules

#Nlink {
      float: right;
      position: relative;
      margin-left: 46px;
      text-align: right;
      color: #2e33ff;
}
#Nlink > a {
      text-decoration: none;
      color: #2e33ff;
}
#Nlink > a:hover,
#Nlink > a.active {
      color: #2e33ff;
}
#Nlink > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      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;
}
#Nlink > a:hover:before,
#Nlink > a.active:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

<div id="Ncontainer">
  <div id="Ncontain">
    <div id="Nlogo">
    </div>
    <div id="Nmenu">
      <div id="Nlink"><a href="url" class="active">Contact</a>
      </div>
      <div id="Nlink"><a href="url">About</a>
      </div>
      <div id="Nlink"><a href="index.html">Work</a>
      </div>
    </div>
  </div>
</div>

Answer 2

As @Danko has suggested, you'll need to add a class to your links on the page for which they are active. Also, change your selector to a class instead of IDs, so you don't have duplicate IDs on your page.

On the Work page, for instance:

<div class="Nlink active"><a href="index.html">Work</a>
</div>

Then add the styles:

.Nlink.active > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      visibility: visible;
}