Text underline animation in CSS - the simplest way?

Question

I'm having an animated underline effect when user points the links on my website. The underline is a bit wider than the text itself, as there's a bit of horizontal padding.

Here's the effect I wanted to achieve and I did:

I was thinking if it was possible to simplify my code. After some trial and error, I used negative margin-left on the underline element and calc() to calculate its width as 100% + 2 * padding. It looks to me like an overcomplicated solution. Can the same effect be achieved without calc() and, perhaps, without negative margin?

Of note, adding a wrapper element is not an option. It needs to be a plain element.

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    color: var(--link-color);
    display: inline-block;
    padding: 0 var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-left: calc(var(--link-underline-padding) * -1);
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: calc(100% + var(--link-underline-padding) * 2);
}

I find dogs pretty cool.

user_8620333 · Answer

A simple background animation can do this:

a {
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  color: #f80;
  display: inline-block;
  padding: 0 .5em 0.2em;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}

I find dogs pretty cool.

How to hover underline start from center instead of left?

user_8964160 · Answer

If you set a to position: relative; you can then use position: absolute; and left: 0px; to push it past the padding and then just use width: 100% to have it extend the entire length.

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    position: relative;
    color: var(--link-color);
    display: inline-block;
    padding: 0px var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    position: absolute;
    left: 0px;
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: 100%;
}

I find dogs pretty cool.

Text underline animation in CSS - the simplest way?

2 Answers