伪元素before的坑--空格导致的错误

今天模拟bootstrap写面包屑导航，写完后发现hover上去的时候效果不对。如图：

我的样式

bootstrap的样式

可以看到在鼠标移上去以后伪元素before也会带有hover效果。

几乎照抄了bootstrap的代码，仍然是这样。看了下页面元素，二者果然不一样：

从图中可以看到两个伪元素加的位置都不一样。我的代码伪元素加在了li>a下，而bootstrap的伪元素加在了li下。

上网查询无果，我甚至都不知道该怎么查这个问题。

最后把bootstrap的源码粘出来一字一字的比对，才发现这个坑：

.hz-breadcrumb>li+li :before{  padding:0 5px;  color:#ccc;  content:">"}

.breadcrumb>li+li:before{  padding:0 5px;  color:#ccc;  content:">"}

对比一下二者的区别，会发现我的代码中伪元素前面有一个空格！！就是这个空格，被浏览器判定了要在其子元素前面增加而不是其本身。

去掉空格以后就好了