Forums

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

Here's my code so far:

  <div class="small-12 large-4 pull-4 columns">
    <nav class="nav1">
      <ul>
        <h1>
        <li><a href="link">about</span></a></li>
        <li><a href="link">work</a></li>
        </h1>
      </ul>
    </nav>
  </div>

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!

CrocoDillon

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 </span> where there shouldn't be.

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?

CrocoDillon

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

kvng

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

CrocoDillon

Happy to help :)

treehouse : what would you like to learn today?

Forums

[Solved] Custom Underline for a:hover