В этом скринкасте мы сосредоточимся на строках под ссылками в верхней части нижнего колонтитула. Мы как бы спотыкаемся, пытаясь понять, какие объекты должны иметь относительное позиционирование, а какие нет, чтобы получить эти линии нужного размера и положения.
Раскрашиваем линию градиентом, используя простой фон Compass @mixin.
Мы решили, что делать уровень блокировки ссылок довольно странно, потому что это делает интерактивную область слишком большой. Я знаю, что это странно, потому что обычно делать интерактивные области большими - это хорошо, но в этом случае вы можете щелкнуть так далеко от текста ссылки, это просто странно.
Следует отметить, что в конечном итоге в нижнем колонтитуле псевдоэлементы, которые создавали строки, изменились на промежутки. Это потому, что я хотел добавить к ним небольшую анимацию при наведении курсора, а в настоящее время вы не можете использовать переходы или анимацию для псевдоэлементов в большинстве браузеров.
«Лазерная» анимация закончилась следующим образом (некоторая вложенность опущена):
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); ) ) )