0 Replies - 316 Views - Last Post: 05 May 2015 - 12:52 PM

#1 Tyr4el   User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Animated Underline Nav Link

Posted 05 May 2015 - 12:52 PM

I need some help with the coding of an animated nav link. I just want a simple transform of a line to come from the left and end at the right. Something like this - http://codepen.io/wo...form/pen/yyVPPe (top navigation bar). I don't have it in my code right now but I've tried several different ways from several different sites and it won't work.

What am I missing here?

http://pastebin.com/Mz2w2SBd - HTML
http://pastebin.com/HUDsrW8L - CSS

All I know is that it involves :before and :after. Still sorta confused as to how they work on an anchor though...

Also, if anyone wants to comment on my code...feel free. I'm up for improving.

EDIT: I actually got it, lol. I used this link. I realized why it wasn't working. He used a background color that wouldnt work with mine lol.


And here's the updated CSS
* {
    font-family: 'PT Sans', sans-serif;
    color: #8BA8BF;

body {
    background-color: #0F1B28;

.navigation {
    list-style-type: none;
    margin: 5px 0px;
    padding: 20px 0px;
    width: 100%;
    background-color: #04060A;

.navigation li {
    display: inline-block;
    padding: 0px 25px;

.navigation li a {
    color: #8BA8BF;
    position: relative;
    text-decoration: none;

.navigation li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;

.navigation li a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);

.whitespace {
    padding: 2px;
    width: 100%;
    margin: 0px;
    background-color: white;

And the link http://www.ascendedk...com/index3.html

I need someone to explain to me how the a:before and a:before:hover selectors work in this case. The only example of :before and :after I have are on W3 schools which uses p::before and ::after but I don't think they're the same here.

This post has been edited by Tyr4el: 05 May 2015 - 01:19 PM

Is This A Good Question/Topic? 0
  • +

Page 1 of 1