在前端开发中，遇到一个需求，需要在li标签hover时在其左侧添加border-left，但会导致文字右移。通过给li添加伪元素:after并使用position定位，实现了文字位置不变的效果。关键在于将伪元素定位到li的左边，并设置100%高度，同时在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定位,脱离文档流，这样就跟文字不在同一层了，因此文字不会被顶开
最低0.47元/天 解锁文章
扫一扫
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
