伪类元素实现可伸缩时间轴

       需求：需要实现纵向列表左边的一条时间轴，时间轴中间除穿插具体的时间节点外不可间断，单击右边信息盒子里的图标，向下弹出子盒子并撑开列表，时间轴相应的延长。再单击图标，子盒子隐藏，时间轴收缩。看图来直观的了解一下这个需求，为便于观察，使用了醒目的红色线段和紫色边框如图a、图b所示：

图a   初始状态下的时间轴                                                       图b  弹出子元素后的时间轴

      实现：方案一，每一个列表为一个item，在单个item左边的时间盒子里使用绝对定位，使用div加border实现两条纵向直线，但是这种方案使用到的标签较多，意味着创建的dom节点很多并且所需要的css代码很繁琐，不利于提升页面性能和开发效率，后经同事指点，采用伪类元素加绝对定位成功的实现了这个需求。

方案二：伪类元素+绝对定位。以单个item为例，用基本的伪类元素实现线段后并使用绝对定位定位到UI要求的位置如图所示，

由于当子盒子弹出时伸长的是底部纵轴线段，故需要着重考虑的是底部纵轴线段长度的控制。使用绝对定位，底部元素长度控制的代码为：

  content: '';  border-left: 1px solid red;  position: absolute;  left: .39rem;  width: 1px;  bottom:.1rem;  top:.9rem;

        
 
        
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
        

        
原标题：伪类元素实现可伸缩时间轴
        
关键词：时间