css实现条的横线

实现步骤中的横线，我们使用css中的after选择器，content写空，然后给这个范围设定一个绝对定位，相当于和它设置伪类选择的元素的位置，直接看代码：

1.  
   const commonStyle = useMemo(() => ({
2.  
   fontSize: '30px'
3.  
   }),[])
4.  
    
5.  
   const guideProcesses = useMemo(() => ([
6.  
   { step: '下载激活文件', desc: 'License Agent: 下载需要被授权服务的激活文件（文件7天有效）', icon: <i style={commonStyle} className="iconfont line icon-folder"></i> },
7.  
   { step: '获取授权文件', desc: 'License Service/SI Console: 通过上传文件激活服务，并下载授权文件', icon: <i style={commonStyle} className="iconfont line icon-auth"></i> },
8.  
   { step: '授权服务', desc: 'License Agent: 上传授权文件，可在许可证页面看到生成的服务授权信息', icon: <i style={commonStyle} className="iconfont line icon-download"></i> },
9.  
   { step: '重启服务', desc: '重启服务，服务重新获取授权', icon: <i style={commonStyle} className="iconfont line icon-restart"></i> },
10.  
    { step: '查看服务授权状态', desc: 'License Agent: 刷新服务页面，查看服务的授权状态', icon: <i style={commonStyle} className="iconfont icon-check"></i> }
11.  
    ]),[commonStyle])
12.  
     
13.  
    const guideInfo = useMemo(() =>
14.  
    <Row className="steps">
15.  
    {
16.  
    guideProcesses.map((item: any) =>
17.  
    <Col className="s-info" span={4} key={item.step}>
18.  
    <div className="s-icon">
19.  
    {item.icon}
20.  
    </div>
21.  
    <div className="s-step">{item.step}</div>
22.  
    <div className="s-desc">{item.desc}</div>
23.  
    </Col>
24.  
    )
25.  
    }
26.  
    </Row>
27.  
    ,[guideProcesses])
28.  
     
29.  
     
30.  
     

相关css

1.  
   .steps {
2.  
   .s-info {
3.  
   text-align: center;
4.  
   &:not(:first-child) {
5.  
   margin-left: 45px;
6.  
   }
7.  
   .s-icon {
8.  
   color: #1890FF;
9.  
   .line::after {
10.  
    content: "";
11.  
    position: absolute;
12.  
    top: 20px;
13.  
    left: 150px;
14.  
    width: 180px;
15.  
    height: 1px;
16.  
    background-color: #1890FF;
17.  
    display: inline-block;
18.  
    }
19.  
    }
20.  
    .s-step {
21.  
    font-weight: 600;
22.  
    }
23.  
    .s-desc {
24.  
    opacity: .6;
25.  
    }
26.  
    }
27.  
    }

这篇好文章是转载于：学新通技术网