How can i make a border-left taking not 100% of left border, but smaller in height?-CodePudding

#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<div id="thirdcolumnfooter">

  <div >
    <h5>FAST SHIPPING</h5>
  </div>

</div>


<div data-element_type="column" id="fourthcolumnfooter">

  <div >
    <h5>YOUR CART</h5>
  </div>

  <div >
    <span>VIEW CART</span>
  </div>

</div>

On the first picture there is what i have for now:

On the second picture there is what i want to have - smaller hight of visible border, let it be 50 % or, for example, the same height as a div with "secondrow" class:

I've seen this question - css border-left 50% height but this is not my case...And by the way i cannot remove the padding-right and padding-left from code - i use it for adding some space between columns.

Thanks

CodePudding user response：

This is my idea, you can add a absolute positioned div to the height you want and then add the required border.

#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
  position: relative;
}

.temp {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<div id="thirdcolumnfooter">

  <div >
    <h5>FAST SHIPPING</h5>
  </div>

</div>


<div data-element_type="column" id="fourthcolumnfooter">

  <div >
    <h5>YOUR CART</h5>
  </div>

  <div >
    <span>VIEW CART</span>
  </div>
  <div ></div>

</div>

CodePudding user response：

My proposition to wrap your html in another root div to make sure, if you add more content on your page, that will not affect to your current container. And the line will be represented by div .

#root {
  display: flex;
  flex-direction: column;
  width: 200px;
}
#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
}

.border {
  display: inline-block;
  top: 50%;
  height: 40px;
  width: 5px;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div #root>
  <div id="thirdcolumnfooter">

    <div >
      <h5>FAST SHIPPING</h5>
    </div>

  </div>

  <div ></div>
  
  <div data-element_type="column" id="fourthcolumnfooter">

    <div >
      <h5>YOUR CART</h5>
    </div>

    <div >
      <span>VIEW CART</span>
    </div>

  </div>
</div>
 
</body>
</html>