Animate line before a-href on hover

Asked Jul 13 '18 at 12:37

Active Jul 13 '18 at 12:37

Viewed 19 times

So I am trying to create an animated line, which would move link ca 15px to the right when it's hovered...so - the line would not be visible before, but when the link is hovered it should appear and grow 15px to the right. However the span element with red background does not seem to appear - any ideas why does this happen..?

.link-animation {
    height: 2px;
    width: 0px;
    background-color: red;
}

.link:hover .link-animation {
    width: 15px;
}

<a class="link" href=""><span class="link-animation"></span>Animate on hover</a>

asked Jul 13 '18 at 12:37

Smithy

1

Set the span to `display:inline-block`. Inline elements are not affected by width – Paulie_D Jul 13 '18 at 12:38
every day something new to learn...thanks! – Smithy Jul 13 '18 at 12:48
1

I would however recommend avoiding using empty spans only for animations. I think you can achieve the same with :before and :after in css – Fantastisk Jul 13 '18 at 12:55

Animate line before a-href on hover

0 Answers0