css 伪类实现渐变线条

如下图所示：

 

 

需要实现渐变的小竖线或者小横线

可以用伪类，

代码如下：

div {
        position: relative;
        z-index: 2;
        &::after{
            content: '';
            position: absolute;
            z-index: 4;
            right: 0;
            top: 10%;
            bottom: 10%;
            width: 1px;
            background: linear-gradient(to bottom, rgba(255, 157, 158, .2), rgba(255, 157, 158, 1), rgba(255, 157, 158, .2)) } } 

div 给相对定位，伪类给绝对定位，背景给从上到下的渐变色，用rgba设置透明度

就可以实现了