                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /手把手从0打造电商网页开发

后面的小竖线

后面的小竖线是怎么添加好的呢？不太明白

weibo_爱吃芒果的洁洁_0

2020-05-16

源自：手把手从0打造电商网页开发 3-2

关注问题我要回答

608

操作

收起

2 回答

qq_慕勒7063652
2020-05-20

css伪类元素，相当于用css弄出来一个假元素，固定在每个li的右侧。竖线本质是用它的背景显示出来的，背景黑色宽度1px看起来就是一根竖线

2 回复有任何疑惑可以回复我~

收起回答

qq_慕UI8441337
2020-05-20

.nav-box ul li:not(:last-child):after{/*:after伪类*/    content: "";/*每个元素后面加上（这里是背景，如果在“”中间写的是文字，那么每个元素后面都加上这个文字）*/ /*not(:last-child)排除最后一个元素*/    width: 1px;    height: 10px;    background: #cccccc;    position: absolute;/*绝对定位*/    top: 11px;    right: 0;    display: block;}
z在每个元素后面加上小竖线，然后去除最后一条线。
小竖线设置为width: 1px;    height: 10px;    background: #cccccc;
根据前面文字绝对定位。