taro开发小程序中，使用css伪类实现时间轴

.event-item {
    position: relative;
    box-shadow:  0 -2px 10px 0px #0fb3ff;
}

.event-item , .idforAttr{
    margin:0  30px;
    padding: 30px;
     background: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
}
.event-item::before{
     content: "";
    position: absolute;
    left: 34px;
    width: 14px;
    height:14px;
    border-radius:  50%;
    background-color: #3e9de1;
    z-index: 10;
}
.event-item::after{
    content: "";
    position: absolute;
    top: 30px;
    left: 40px;
    width: 2px;
    height: calc(100% + 30px);
    border-radius:  4px;
    background-color: #0fb3ff;
    z-index: 9;
}
.event-item:last-child::after{
    content: "";
    position: absolute;
    left: 40px;
    width: 2px;
    height: calc(100% - 30px);
    border-radius:  4px;
    background: #0fb3ff;
    z-index: 9;
}

jsx代码：

                            
                                
                                    
                                         {item.title}
                                    
                                
                                
                                    ID:
                                    
                                        {item.operator}
                                
                                
                                    时间: 
                                    
                                        {formatDate(item.timestamp)}
                                
                                
                                    text:
                                    
                                        {item.content}
                                
                                
                                    content: 
                                    
                                        {item.signature}
                                
                            

原文：http://qingzhuyue.cn