老师您好，如图1中的竖线，我设置的是&:after是可以正常显示的，如果我像老师的代码里一样设置成&:before就会在左边显示，如图2，查资料发现&:after是在元素后面显示，before是在前面显示，所以对于老师设置成before还能显示正常表示疑惑

![

export default{

name:'nav-header'

}

@import './../assets/scss/base.scss';

@import './../assets/scss/mixin.scss';

@import './../assets/scss/config.scss';

.header{

.nav-topbar{

height: 39px;

line-height: 39px;

background-color: #333333;

color: #B0B0B0;

.container{

@include flex();

a{

display: inline-block;

color: #B0B0B0;

margin-right: 17px;

}

.my-cart{

width: 110px;

background-color: #FF6600;

text-align: center;

color: #FFFFFF;

.icon-cart{

@include bgImg(16px,12px,'/imgs/icon-cart-checked.png');

margin-right: 4px;

}

}

}

}

.nav-header{

.container{

position: relative;

height: 112px;

@include flex();

.header-log{

display: inline-block;

width: 55px;

height: 55px;

background-color: #FF6600;

a{

display: inline-block;

width: 110px;

height: 55px;

&:before{

content:'';

@include bgImg(55px,55px,'/imgs/mi-logo.png');

background-size: 55px;

transition: margin .2s;

};

&:after{

content:'';

@include bgImg(55px,55px,'/imgs/mi-home.png');

background-size: 55px;

};

&:hover:before{

margin-left: -55px;

transition: margin .2s;

};

}

}

.header-menu{

display: inline-block;

width: 643px;

padding-left: 209px;

.item-menu{

display: inline-block;

color: #333333;

font-weight: bold;

font-size: 16px;

line-height: 112px;

margin-left: 20px;

span{

cursor: pointer;

}

&:hover{

color:$colorA;

.children{

height: 220px;

}

}

.children{

position: absolute;

top: 112px;

left: 0;

width: 1226px;

height: 220px;

border-top: 1px solid #E5E5E5;

box-shadow: 0px 7px 6px 0px rgba(0,0,0,0.11);

z-index: 10;

.product{

position: relative;

float: left;

width: 16.6%;

height: 220px;

font-size: 12px;

line-height: 12px;

text-align: center;

a{

display: inline-block;

}

img{

width: auto;

height: 111px;

margin-top: 26px;

}

.pro-img{

height: 137px;

}

.pro-name{

font-weight: bold;

margin-top: 19px;

margin-bottom: 8px;

color: $colorB;

}

.pro_price{

color: $colorA;

}

&:before{

content: ' ';

position: absolute;

top: 28px;

border-left: 1px solid $colorF;

height: 100px;

width: 1px;

}

&:last-child:after{

display: none;

} ;

}

}

}

}

.header-search{

width: 319px;

.wrapper{

height: 50px;

border: 1px solid #E0E0E0;

display:flex;

align-items: center;

input{

border: none;

box-sizing: border-box;

border-right: 1px solid #E0E0E0;

width: 264px;

height: 50px;

padding-left: 14px;

}

a{

@include bgImg(18px,18px,'/imgs/icon-search.png');

margin-left: 17px;

}

}

}

}

}

}