关于图片右边的竖线问题
来源：5-4 Nav-Header组件（4）
慕桂英8566455
2020-03-16
老师您好，如图1中的竖线，我设置的是&:after是可以正常显示的，如果我像老师的代码里一样设置成&:before就会在左边显示，如图2，查资料发现&:after是在元素后面显示，before是在前面显示，所以对于老师设置成before还能显示正常表示疑惑
<template>
<div class="header">
<div class="nav-topbar">
<div class="container">
<div class="topbar-menu">
<a href="javascript:;">小米商城</a>
<a href="javascript:;">MUI</a>
<a href="javascript:;">云服务</a>
<a href="javascript:;">协议规则</a>
</div>
<div class="topbar-user">
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="javascript:;" class="my-cart"><span class="icon-cart"></span>购物车</a>
</div>
</div>
</div>
<div class="nav-header">
<div class="container">
<div class="header-log">
<a href="/#/index"></a>
</div>
<div class="header-menu">
<div class="item-menu">
<span>小米手机</span>
<div class="children">
<ul>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt="">
</div>
<div class="pro-name">小米壁画电视 65英寸</div>
<div class="pro-price">6999元</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-2.jpg" alt="">
</div>
<div class="pro-name">小米全面屏电视E55A</div>
<div class="pro-price">1999元</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-3.png" alt="">
</div>
<div class="pro-name">小米电视4A 32英寸</div>
<div class="pro-price">699元</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-4.jpg" alt="">
</div>
<div class="pro-name">小米电视4A 55英寸</div>
<div class="pro-price">1799元</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-5.jpg" alt="">
</div>
<div class="pro-name">小米电视4A 65英寸</div>
<div class="pro-price">2699元</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-6.png" alt="">
</div>
<div class="pro-name">查看全部</div>
<div class="pro-price">查看全部</div>
</a>
</li>
</ul>
</div>
</div>
<div class="item-menu">
<span>Redmi红米</span>
<div class="children"></div>
</div>
<div class="item-menu">
<span>电视机</span>
<div class="children"></div>
</div>
</div>
<div class="header-search">
<div class="wrapper">
<input type="text" name="keyword">
<a href="javascript:;"></a>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default{
name:'nav-header'
}
</script>
<style lang="scss">
@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;
}
}
}
}
}
}
</style>
写回答
1回答
-
河畔一角
2020-03-16
设置before和after都可以。before的时候需要把first-child设置为隐藏。设置after的时候需要把last-child隐藏。所以两个都可以。
00
相似问题