項(xiàng)目中遇到了需要實(shí)現(xiàn)點(diǎn)擊有勾選效果的情況,試了一下通過偽元素的方式實(shí)現(xiàn)了.
需要達(dá)到的效果:
????????左邊是點(diǎn)擊后的效果,右邊是原始的效果.

需要達(dá)到的效果圖
直接上代碼:

html
li標(biāo)簽的設(shè)置為相對(duì)定位.div為絕對(duì)定位,通過為元素定位的方式實(shí)現(xiàn).

css
js就是普通的點(diǎn)擊事件.切換類名來實(shí)現(xiàn).

js