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