html - 段落的一侧边框

Question

我正在尝试使用 :before class 显示段落的左边框。

但输出似乎与我想要实现的有点不同。

代码:

p.left-border::before {
    border-left: 3px solid #9e9464;
    content:"";
    padding: 0 20px 0 0;
    vertical-align: middle;
}
p {
    line-height:30px;
}

 <h4>Our Unique Approach</h4>

<p class="left-border">Aspire to Acheive is unlike anything you’ve ever experienced. The Fellowship brings together some of the world’s most creative and motivated young people, and helps them bring their most ambitious projects to life. Thiel Fellows are given a grant of $100,000 to focus on their work, their research, and their self-education while outside of university.</p>

这里是 demo 的链接到目前为止我所做的一切。

这是我想要实现的截图:

Answer 1

也许是这样？

p {
    line-height:30px;
    padding-left: 20px;
    position: relative;
}
p.left-border::before {    
    content:"";
    position: absolute; top: 10px; left: 0;    
    vertical-align: middle;
    height: 60%;
    width: 5px;
    background: #9e9464;
}

<h4>Our Unique Approach</h4>

<p class="left-border">Aspire to Acheive is unlike anything you’ve ever experienced. The Fellowship brings together some of the world’s most creative and motivated young people, and helps them bring their most ambitious projects to life. Thiel Fellows are given a grant of $100,000 to focus on their work, their research, and their self-education while outside of university.</p>