html - Underline CSS Animation stop on active page -

html - Underline CSS Animation stop on active page -

the animation works great, want know how maintain underline on active page on. example. 'work' page.

this bit of text have write won't allow me post without rambling little more though simple question. frustrating. ramble, ramble more.

class="snippet-code-css lang-css prettyprint-override">#nlink { float: right; position: relative; margin-left: 46px; text-align: right; color: #2e33ff; } #nlink > { 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: 0.3s ease-in-out 0s; transition: 0.3s ease-in-out 0s; } #nlink > a:hover:before { visibility: visible; -webkit-transform: scalex(1); transform: scalex(1); } class="snippet-code-html lang-html prettyprint-override"><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>

like so:

first, add together class element when you're on page, can via javascript even.

example

var nav_items = document.queryselector("#nlink a"); (var i=0,l=nav_items.length;i<l;i++) { if(nav_item.href === window.location) { nav_item.classname += " active"; } }

then add together sec rule match block :hover/:before rules

class="snippet-code-css lang-css prettyprint-override">#nlink { float: right; position: relative; margin-left: 46px; text-align: right; color: #2e33ff; } #nlink > { 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: 0.3s ease-in-out 0s; transition: 0.3s ease-in-out 0s; } #nlink > a:hover:before, #nlink > a.active:before { visibility: visible; -webkit-transform: scalex(1); transform: scalex(1); } class="snippet-code-html lang-html prettyprint-override"><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>

html css css-animations