Grow your CSS skills. Land your dream job.

Custom Underline for a:hover

  • # March 3, 2013 at 10:08 pm

    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:

    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!

    # March 3, 2013 at 10:23 pm

    Something like this would work, maybe there are better ways.

    .nav1 a {
    position: relative;
    text-decoration: none;
    }
    .nav1 a:hover:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 23px;
    height: 1px;
    margin-left: -12px;
    background: black;
    content: “”;
    }

    You don’t have much so far, just html? There are some errors in there as well, the `h1` element is misused and there is a `` where there shouldn’t be.

    # March 3, 2013 at 10:28 pm

    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?

    # March 3, 2013 at 10:35 pm

    Yes, remove the `h1`. It’s invalid html5 there and it’s not semantic either.

    # March 3, 2013 at 10:43 pm

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

    # March 4, 2013 at 7:14 am

    Happy to help :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".