Re: how to achieve the moving sparking effect with css and javascript as in css-tricks.com footer

[Kitty Giraudel]

Each anchor contains a span.

.link-list a > span {

position: absolute;

pointer-events: none;

bottom: 0;

width: 100%;

height: 1px;

margin-bottom: 3px;

left: 0;

background: linear-gradient(left, white, white 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));

background-position: 100% 0;

transition: background 0s linear;

}



.link-list a:hover > span,

.link-list a:focus > span {

background-position: -100% 0;

transition: background 0.4s;

}

Done.