段落的一侧边框

Question

我正在试着用:课前显示一个段落的左边框。

但产出似乎与我想要实现的略有不同。

代码：

​

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>

​

以下是我迄今所做工作的演示链接。

下面是我想要达到的目标的截图：

​

​

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>

​

Answer 2

这可以通过定位前元素absolute实现，如下所示：http://jsfiddle.net/e12pk3bp/2/