Custom Underline for a:hover

[kvng]

Hi everyone!

I’ve been trying out a few tutorials and adapting a few snippets to try and make this work, but I still haven’t been able to figure this out.

I’m trying to have a 23px x 1px dash when hovering over links in the navigation. Here is what I’m aiming for:

[Mockup](http://cl.ly/image/370g2t2s2G1O “Mockup”)

Here’s my code so far:

about

work

CSS

nav {
display: inline-block;
padding-bottom: 10px;
}

nav.nav1 {
text-align: right;
margin-right: 3em;
margin-top: -.6em;
}

nav.nav1 li {
float: right;
margin-left: 4em;
}
Any help will be awesome!

[kvng]

Thanks so much! Oops, the span was a remnant from a last trial.

And, sorry, I should just be styling the nav directly, and not with h1 yes?

[kvng]

Thanks a lot for the help. Just starting out and trying to code my portfolio, so this will be fun.

[Author]

Posts