2

I'm trying to understand this CodePen, which shows how to animate a bottom "border" that's actually a pseudoelement. Here's the code:

a {
    display: inline-block;
    text-decoration: none;
}

a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

a:hover::after {
    width: 100%;
}
<ul>
    <li><a href="#">Link</a></li>
</ul>

The part I don't understand is that without setting display: inline-block on the a (the default is inline), on hover the pseudoelement spans the full width of the li, whereas with display: inline-block, the pseudoelement is the same width as the a element only. What explains the difference in behavior?

Stacks Queue
  • 848
  • 7
  • 18
nCardot
  • 5,992
  • 6
  • 47
  • 83

1 Answers1

1

CSS widths, when specified as a percentage:

Defines the width as a percentage of the containing block's width.

If the a is inline it is not the containing block, the li is.

ray
  • 26,557
  • 5
  • 28
  • 27