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);


  1. 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…

    • 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. 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?

    • 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.