CODEWITHSUNDEEP
css
kaytrance
kaytrance

Reputation: 2757

Make borders not overlap visually

I am trying to make some kind of vertical menu with hovering state. Im my mind I want each menu item to have color 1-px strip on hover and 1px bottom border. I cannot use them both because borders overlap with 45 degrees, therefore I will have bottom border not cobering entire menu item width. Here I have something almost working http://jsfiddle.net/Wa568/1/ by applying:

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

trick. Borders do not overlap by 45 degrees now, but what I want is to have black bottom 1px border all the time (when not hovered) covering entire menu item block, and when hover green left border should appear overlapping completely left bottom part of bottom border.

Solutions with wrap inside block with width 100% and top:-1, and jquery manipulation are not accepted.

Upvotes: 0

Views: 1222

Answers (1)

Arbel
Arbel

Reputation: 30999

This will do the job for you. Pure CSS. No need for additional elements.

DEMO 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>

Upvotes: 1

Related Questions