一段的一边

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>

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

以下是我想要实现的截图：

Answer 1

也许是这样？

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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