선생님 양 옆에서 색을 차게 할 방법은 없나요? 예를 들어서 위->아래 / 왼쪽->오른쪽이 동시에 차는 효과가 생기게끔 하고 싶어요. 색을 채우는 게 아니라 전 시간에 했던 것 처럼 선을 긋는 것도 마찬가지인데요. 테두리가 왼쪽 오른쪽 위쪽 아래쪽 4개가 있는데 호버했을 시에 이 네 방향이 전부 선이 그어지게 하려면 어떻게 해야 할까요?  

<style> .contents{   position: relative;   padding-bottom: 50px;   z-index:9; } .sb_menu{   position: absolute;   margin-top:-25px;   display: table;   border-collapse: collapse;   table-layout : fixed;   width:100%;   font-size: 1.1em;   /* background-color: aqua;   */ } .sb_menu li{   display: table-cell;   border:1px solid #dcdcdc;    background-color: #fff;   border-top:none;    text-align: center; } .sb_menu li.on{   background-color: #2d3c47;   border-left:none; }   .sb_menu li a{   display: block;   width:100%;   padding:17px 0;   /* border:1px solid red; */ } .sb_menu li.on a{   color: #fff;; } .sb_menu li a:hover{   background-color: #2d3c47;   color: #fff;; } .sb_menu li a:hover:last-child(){   border-right:none; } </style> <section class="contents inner">   <div class="sb_menu">     <li class="on"><a href="#" >사업개요</a></li>     <li><a href="#">브랜드소개</a></li>     <li><a href="#">오시는길</a></li>   </div> </section> /*****************************************/ 아래 부분이 인식이 되지 않습니다. .sb_menu li a:hover:last-child(){   border-right:none; } 마지막 박스 에 마우스 올리면 오른쪽 줄이 나오지 않게 하려고요.. a:hover:last-child() 이렇게 사용하면 안되는건가요?