테두리를 시각적으로 겹치지 않게 만들기

Question

호버링 상태의 일종의 수직 메뉴를 만들려고합니다. 내 마음이 나는 각 메뉴 항목을 가져 오기 및 1px 아래쪽 테두리에 색상 1-px 스트립이 있어야합니다. 테두리가 45도까지 겹치기 때문에 둘 다 사용할 수 없으므로 전체 메뉴 항목 너비를 줄이지 않고 아래쪽 테두리를 갖게됩니다. 여기에 제가 적용 할만한 것을 거의 가지고 있습니다 http://jsfiddle.net/Wa568/1/

트릭. 테두리는 지금 45도만큼 겹쳐지지 않지만, 원하는 것은 전체 메뉴 항목 블록을 덮고있는 검은 하단 1px 경계선을 항상 갖게됩니다. (호버하지 않을 때) 호버 녹색 왼쪽 테두리가 겹쳐서 나타나야합니다. 왼쪽 하단 부분 하단 테두리.

너비가 100 %이고 위쪽이 -1 인 랩 내부 블록이있는 솔루션 및 jquery 조작은 허용되지 않습니다.

Answer 1

이렇게하면됩니다. 순수한 CSS. 추가 요소가 필요 없습니다.

DEMOhttp://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>