In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn't so we can get these lines the size and position they need to be.

We colorize the line with a gradient using the simple background Compass @mixin.

We decide that making the links block level is rather weird, because it makes the clickable area too big. I know that's a weird thing to say because usually making clickable areas big is good, but in this case you can click so far away from the link text it's just weird.

It should be noted that ultimately in the footer the pseudo elements that created the lines where changed to spans. This is because I wanted to add a little animation to them on hover and you can't use transitions or animations on pseudo elements in most browsers at the moment.

The "laser" animation ended up as follows (some nesting omitted):

a {
  color: white;
  /* etc */
  > span {
    position: absolute;
    pointer-events: none;
    bottom: 0;
    width: 100%;
    height: 1px;
    margin-bottom: 3px;
    left: 0;
    @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0)));
    background-position: 100% 0;
    @include background-size(200% 0);
    @include transition(background 0s linear);
  }
  &:hover, &:focus {
    color: $orange;
    > span {
      background-position: -100% 0;
      @include transition(background 0.4s);
    }
  }
}

Comments

  1. User Avatar
    JoeShmoe
    Permalink to comment#

    Chris, I think that you can remove the whole snippet for the ‘laser’ thingy, being that you removed it from the site and people seeing this in the future won’t understand what the end result is supposed to look like…

    • User Avatar
      Chris Coyier
      Permalink to comment#

      The laser isn’t in this video anyway right? I don’t think that made the screencast. But also removing it from the site wasn’t intentional, gotta fix that.

  2. User Avatar
    Josh Eaton
    Permalink to comment#

    I noticed on the live site, that you went back to using an unordered list for the footer links. Could you explain why you changed it back?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Turns out I needed an extra wrapping element, so I figured it might as well be a list item. I needed a box around the entire “half” width box that I could relatively position so I could have a span that is absolutely positioned the full width. I could have make the anchor links themselves display block and use that, but then the clickable area for the link was just too darn big I thought.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag