想要出现如图效果中间的线距离两边32px,并且只有中间一条,第二个li没有,利用:before实现
.dropDownMenu { position: relative; padding: 0 32px; .font(96px, @font28, left, #404040, 1); &:before{ content: ""; position: absolute; left: 32px; right: 32px; top: 96px; border-bottom: 1px solid @border_color; } &:last-child:before { content: ""; position: absolute; }}
- 外科
- 内科
注意:
- 写before时content属性一定要有,如果是放图片或只是画出一条线那么双引号中间什么也不要写,连空格都不写。
- 盒子的定位方式为relative,before的定位方式为absolute
- 设置最后一个元素清除before用&:last-child找到最后一个,在设置他的before即可。