用伪元素(::after)实现
//父元素
.recom_bd ul li {
position: relative; //父元素用相对路径
float: left;
}
//子元素
.recom_bd ul li:nth-child(-n+3)::after {
content: '';
position: absolute; //子元素用绝对路径
right: 0;
top: 10px;
width: 1px;
height: 145px;
background-color: red;
注:
1.nth-child(-n+3)表示,在div内,li有4个,一般前三个li需要竖线隔开,第四个不需要,n+3表示从第三个往后面数,则-n+3就是从第三个往前数,即实现了前三个竖线显示,第四个不显示。
2.right和top表示竖线在li的位置是靠右的。
3.width和height表示竖线在li中的大小。
4.子绝父相记得搭配使用(子元素用绝对路径,父元素用相对路径);
效果如下: