做項目的時候經(jīng)常出現(xiàn)這種樣式，當你鼠標移動到塊元素上，會出現(xiàn)一個進度條或者向兩邊發(fā)散的條，會讓頁面更加美觀，這種條不能用邊框代替，因為你不能決定邊框?qū)挾?，而你專門放一個div會讓你的結(jié)構(gòu)看起來不是很美觀。
這里我們可以用偽元素來解決這個問題。偽元素允許你在已選擇的元素內(nèi)部創(chuàng)建或修改內(nèi)容，而無需在文檔結(jié)構(gòu)中添加額外的HTML元素。
還是我們的結(jié)構(gòu)，熟悉的css。對于結(jié)構(gòu)的問題可以看這里.
這邊對于after最好使用定位，脫離文檔流之后不僅可以在任何地方方便展示，而且還不會占用原本的html所占的空間。
這里我鼠標放上去之后，after經(jīng)過兩秒的動畫效果之后已經(jīng)開始變長。
還有另外一種從中間發(fā)散的方式，其實也是非常簡單。
只需要改變一下after的初始位置就可以了。
