change height of right border [duplicate]

Question

My right border is 100% height:

border-right:1px solid #000000;

I'd like to make it shorter:

Is it achievable using CSS without changing the height of the div? I need div to be 100% height and only change that border.

Answer 1

You can use a pseudo element to replace the right border. As you can choose the size/position of it you can simulate a border with it :

FIDDLE

HTML :

<div></div>

CSS :

div {
    height:200px;
    width:500px;
    background:gold;
    position:relative;
    border-top:10px solid grey;
    border-bottom:2px solid #000;
}
div:after {
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:2px;
    height:60%;
    background:#000;
}

Supports IE8 see caniuse

Answer 2

This is also possible with pseudo elements. I don't know if this is what you're looking for:

fiddle

`

div:after{
  content:'';
  height:150px;
  width:200px;
  border-right:1px solid yellow;
  position: absolute;
  top:30px;

}