Clever Geek Handbook

One side of a paragraph border

I am trying to show the left border for a paragraph using: in front of the class.

But the result seems to be slightly different from what I want to achieve.

code:

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>
Run codeHide result


Here is a link to a demo of what I have done so far.

Here is a screenshot of what I want to achieve:

Screen shot of a paragraph of text with a green border to the left that goes down 3 lines but not the entire length of the paragraph.

+3


source to share


2 answers


maybe so?



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>
Run codeHide result


+3


source


This is possible by positioning a before element absolute

like: http://jsfiddle.net/e12pk3bp/2/



+2


source






More articles:


All Articles