偽類元素實現可伸縮時間軸，伸縮

偽類元素實現可伸縮時間軸，伸縮

       需求：需要實現縱向列表左邊的一條時間軸，時間軸中間除穿插具體的時間節點外不可間斷，單擊右邊資訊盒子裡的表徵圖，向下彈出子盒子並撐開列表，時間軸相應的延長。再單擊表徵圖，子盒子隱藏，時間軸收縮。看圖來直觀的瞭解一下這個需求，為便於觀察，使用了醒目的紅色線段和紫色邊框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;
    height:auto;

top屬性設定此直線距離頂部的位置，即要留出一段空白顯示具體的時間18:48，bottom屬性設定元素長度底部的位置，要想上下間的item無縫對接顯示成一條不間斷的直線，故設定bottom：0非常重要。最關鍵的還是要設定父元素position:relative了，即設定此直線位置是相對於哪個父元素而言，w3school介紹的是，產生絕對位置的元素，相對於static定位以外的第一個父元素進行定位，若父元素沒有相對定位position:relative，則該子級元素會相對於body來定位。故此處設定單個item元素的定位position：relative即可，除此之外，還需要設定包裹偽類元素的父元素高度為:100%，因為子類元素需要從父類元素那裡繼承高度。若父元素設定的不恰當，可能會引起時間軸不出現或者長度不對。