#073：Footer 的 CSS 样式，第三部分

在本视频中，我们重点关注了 footer 顶部链接下方的那条线。我们尝试着找出哪些元素应该使用相对定位，哪些不应该，以便使这些线条达到所需的尺寸和位置。

我们使用简单的 background Compass @mixin 为线条添加了渐变颜色。

我们认为将链接设置为块级元素有点奇怪，因为它使可点击区域变得太大。我知道这可能有点奇怪，因为通常让可点击区域更大是好事，但在这种情况下，你可以点击离链接文本很远的地方，这感觉很奇怪。

需要注意的是，最终在 footer 中，创建线条的伪元素被更改为 span 元素。这是因为我想在悬停时为它们添加一点动画效果，而目前大多数浏览器都不支持在伪元素上使用过渡或动画。

“激光”动画最终效果如下（省略了一些嵌套）

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