论:hover::before与:hover ::before的买家秀与卖家秀

相信我，前端真的有毒，好玩，且上瘾

今天加班的时候发现一个特别好笑的效果，（好吧，其实是自己基础知识没学好，然后写错引发的笑剧，但是，真的戳到了我的笑点，不笑的拒绝diss）

起个名字：论:hover::before与:hover ::before的买家秀与卖家秀

先贴张图，本来，我以为是我实现的效果是这样的：（请忽略马赛克，看蓝色的小条条）

这个效果是这样子的，鼠标经过时，整张卡片会呈现出阴影效果，并在卡片的左上角显示出一个蓝色的小条条。我第一反应只想到了用hover来设置鼠标经过呈现的阴影效果，后来在前辈的指点下才想起来还有::before这种东西，深深地鄙视了一把自己以后，机智的我马上把画出来的小蓝条样式名改成了.xxx:hover ::before，然后神奇的事情发生了，请看买家秀：

哦豁，刺激，我只想要一个小蓝条，结果他出来了1，2，3，4，5，6，7，7个小蓝条，数了一下，我这个小卡片的代码由8个div构成，小蓝条基于最外层div定位，所以，显示出来的7个小蓝条，其实是外层div下的div，也就是外层div的子元素的小蓝条，为什么会显示其子元素的小蓝条呢？
罪魁祸首就是它，那个空格！
正确答案是——:hover::before 而不是——:hover ::before，空格无罪，但就是不能要空格，因为这是在调用它的子元素，老子被儿子篡位啦！

哈哈，其实上面这段解释都是我看了正确答案以后强行解释的，只有最后一句话才是真的，如果有强行解释错了，请狠狠地指教我， biu~