From the list: Build ✔ Footer - Animation - hover over links & underline appears from left side (teal) Veronica A. added this on Jun 14, 2019 Completed Jun 28, 2019 by Kyle S. Comments & Events Kyle Sullivan, Web Development I was able to achieve the desired effect with the following code in /sass/site/primary/footers/_footerFourColumn.scss. a { font-size: 1.25rem; &:hover, &:focus { color: $tertiary; text-decoration: none; p, span { color: $tertiary; } &::after { transform: scaleX(1); transform-origin: 0% 50%; } } &::after { display: block; content: ""; border-bottom: 3px solid $primary; transform: scaleX(0); transition: transform 250ms ease-in-out; } } Jun 28, 2019 at 6:35 PM Notified 1 person Kyle Sullivan completed this to-do. Jun 28, 2019 at 6:35 PM
Kyle Sullivan, Web Development I was able to achieve the desired effect with the following code in /sass/site/primary/footers/_footerFourColumn.scss. a { font-size: 1.25rem; &:hover, &:focus { color: $tertiary; text-decoration: none; p, span { color: $tertiary; } &::after { transform: scaleX(1); transform-origin: 0% 50%; } } &::after { display: block; content: ""; border-bottom: 3px solid $primary; transform: scaleX(0); transition: transform 250ms ease-in-out; } } Jun 28, 2019 at 6:35 PM Notified 1 person
a { font-size: 1.25rem; &:hover, &:focus { color: $tertiary; text-decoration: none; p, span { color: $tertiary; } &::after { transform: scaleX(1); transform-origin: 0% 50%; } } &::after { display: block; content: ""; border-bottom: 3px solid $primary; transform: scaleX(0); transition: transform 250ms ease-in-out; } }