解决hover时给使用了hover的元素的伪元素添加样式的问题

在上周的一个需求里面，需要给一个ul下的每一个li标签，当鼠标移动到li标签的时候，给这个li标签的左侧加一个border-left的边框。如下图

但是实际上我们看到，当一个li标签处于hover状态的时候，我们给这个li标签增加了一个border-left，结果发现li标签里面的文字被往右边顶了，这是因为border-left的宽度跟整个li标签的宽度是一个整体，假设hover前li标签的宽度是100，那么hover后，就应该是border-left的宽度加上剩下的宽度，所以我们看到的就是文字向右跑了。
那么我想要实现的效果即使加上border-left，文字也在原来的位子保持不变。也就是下面这种效果

现在我们看到，上下两个li标签的文字是对齐的了，即使border-left出现了，文字也不会往右边跑了。

接下来说一下实现思路，
1.因为是给li添加一个border-left，但直接在hover的时候添加border-left就会将文字顶开

2.所以给li标签添加一个伪元素:after,并且让该元素使用position定位,脱离文档流，这样就跟文字不在同一层了，因此文字不会被顶开

这里随便写了一点代码，只是为了举例子方便而已，最重要的还是下面的样式

注意画红框的地方，这里先对每一个li标签，添加一个position:relative，这个属性是为了li标签的伪元素做铺垫的，并且假定高度是74px。
之后开始写伪元素的样式，也就是.list:after，伪元素的写法不用多说，content属性是必须的，然后这里给伪元素添加一个position:absolute, 绝对定位是相对于离该元素最近的第一个position不为static的父元素的定位，那么这里第一个position不为static的定位的元素就是li标签本身，因为li标签的position是relative。
除了position: absolute外，我们还加了left: 0和height: 100%,我说了，我要给li标签加一个border-left，所以这里要加一个left: 0，让这个伪元素的位置定位到li标签的最左边，之后设置height: 100%,这个100%跟position:absolute一样，也是相对于position:relative的，因此使用了position:relative的元素的高度是多少，那么使用了position:absolute的元素的高度就是多少，height:100%是一个相对的概念，指相对于父元素高度的100%,所以伪元素的高度也是74px。

最后一个红框，当我们想给hover元素的伪元素添加样式时，使用方法就是最后一个红框的样子。我们平时可能习惯了样式之间加一个空格这样的做法，但这是正对于空格右边的class是左边的class的子元素的情况。

但如果是该元素的伪元素，就必须把这个空格去掉，才算是给伪元素增加样式。这是这篇博客最重要的一点。