css - 使边框在视觉上不重叠

Question

我正在尝试制作某种具有悬停状态的垂直菜单。我想我希望每个菜单项在悬停时有 1-px 颜色条和 1px 底部边框。我不能同时使用它们，因为边框以 45 度重叠，因此我的底部边框不会影响整个菜单项的宽度。在这里我有一些几乎可以工作的东西 http://jsfiddle.net/Wa568/1/通过申请:

div.box::after {
  content: "";
  position: absolute;
  bottom: 0; top: 0px; left: 0; right: 0;
  border-bottom: 1px solid #000; 
}

诡计。边框现在不重叠 45 度，但我想要的是始终(未悬停时)覆盖整个菜单项 block 的黑色底部 1px 边框，并且当悬停绿色左边框时应该完全 底部边框的左下部分。

不接受宽度为 100% 和 top:-1 的 block 内部换行和 jquery 操作的解决方案。

Answer 1

这将为您完成这项工作。纯 CSS。不需要额外的元素。

演示 http://jsfiddle.net/Wa568/3/

CSS:

div.box {
    position: relative;
    width: 200px;
    padding: 15px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ccc;
    border-left: 10px solid transparent;
}
div.box:hover {
    border-left: 10px solid #0a0;
}
div.box:after {
    display:block;
    position: absolute;
    bottom: 0;
    left:-10px;
    width:calc(100% + 10px);
    height:1px;
    border-bottom: 1px solid #000;    
    content: " ";
}
div.box:hover:after {
    width:100%;
    left:0px;
}

HTML:

<div class="box">awesome content</div>