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