CSS绝对定位top: 100%和bottom:0的区别

我在写顶部导航栏时，需要给li元素下方添加一个横线动画

.top-nav nav > ul > li > a:hover::after {    content: "";    display: block;    width: 100%;    background: #e6686d;    height: 2px;    position: absolute;}

这是还没有给横线添加定位的时候。

添加top: 100%后，可以发现横线移动到了父元素的border外。

而bottom: 0px并没有超过父元素的boder，而是在boder只上延伸。

结论top: 100%的定位是以父元素border下界为基线，向下延伸。bottom: 0px的定位是以父元素border上界为基线，向上延伸。