设置border-left的高度

Question

HTML代码：

<div class="program-contents">

   <div class="program-item"> ... </div>
   <div class="program-item"> ... </div>
   ...
   <div class="program-item"> ... </div>

</div>

.program-contents 的样式：

margin-left: 25px;
margin-top: -35px;
padding: 35px 25px 0 25px;
border-left: 2px solid #e2e0e0;

我如何设置高度为左边框的。程序，内容为90％ ？我正在尝试不为 .program-contents显示 border-left的底部。我需要这个块的“左边界”高度的 90%。

Answer 1

您可以尝试使用伪元素。方法如下：

.program-contents {
    height: 300px;
    width: 300px;
    background-color: #EEE;

}

.program-contents::before {
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}

所述:before伪元素可用于插入一个元素的内容之前生成内容。我将其高度设置为其父级（即.program-contents）的90%，然后为其添加了左边框。

如果您需要边框垂直居中，您可以添加top: 5%. 像这样的事情：

.program-contents::before {    
    position: relative;
    top: 5%;
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}