#073: CSSing the Footer, Part 3

(Updated on )

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