CODEWITHSUNDEEP
csshtmlsass
Romeo Leonor
Romeo Leonor

Reputation: 21

How to control border bottom length?

Here's the image i'm trying to replicate.

image

Here's the link I've got so far.

My issue is the border-bottom length corresponds to the fullwidth of containing element. From the image attached, the border-bottom should be a little shorter and centered.

http://jsbin.com/tukomuwuri/edit?html,css,output

Upvotes: 2

Views: 1746

Answers (2)

Ashutosh Kumar
Ashutosh Kumar

Reputation: 11

You can add a pseudo after element to the list item and then add a border-top property.

li:after{

  content: "";
  display:block;
  border-top: 4px solid color;
  width: /* your desired width*/

}

You can give it an absolute position to center it or align it however you want.

Upvotes: 1

imjared
imjared

Reputation: 20584

By default, the border is going to stretch the width of the block-level element (in this case, the <a>).

To achieve your desired effect, you'll want to actually decrease the width of the <a>. You can do this by padding the containing <li>:

li {
  background-color: white;
  padding: 0 40px;
  position: relative;
  &:hover {
    background-color: #e5e8e8;
    a:before {
      content: '|';
      position: absolute;
      top: 10px;
      left: -15px;
    }
  }
}

Here's the example: http://jsbin.com/ciqujidupa/3/edit?html,css,output

Upvotes: 0

Related Questions