我在写顶部导航栏时，需要给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上界为基线，向上延伸。
