css - 当悬停更改颜色时，我的 css ul li 表名册缺少一个像素

Question

我有一个悬停，可以改变左边框的颜色，但它缺少一个像素。我怎样才能解决这个问题？

<ul>
     <li><a href="#">First element</a></li>
     <li><a href="#">Second element</a></li>
     <li><a href="#">Third element</a></li>
</ul>

CSS：

ul {

   list-style-type:none;
   margin:0;
   padding:0;

   li {

       border-top: 1px solid #e5e5e5;
       border-left: 3px solid #e5e5e5;

       &:hover {
           border-left-color: #be0928;
       }
   }
}

Answer 1

您可以使用该box-shadow属性来模拟边框。正如评论中提到的其他人所提到的，该border物业正在按预期行事。

这是box-shadow技巧的CSS：

li {
    padding: 3px 10px;
    border-top: 1px solid #e5e5e5;
    box-shadow: -3px 0 #e5e5e5;
    width:150px;
    float:left;

    &:hover {
        box-shadow: -3px 0 0 0 #be0928;
    }
}

请参阅 JSFiddle