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