html - 删除由行高引起的额外边框

Question

我想为一个段落设置左边框，但由于行高，边框有额外的高度。我想删除超出文本顶部和底部的边框高度。看截图:

我尝试了几种方法，例如将段落包装在一个 div 中并设置负边距，但似乎不起作用。

这是简单的 CSS:

p{
    margin: 20px;    
    line-height: 2;    
    border-left: 5px solid green;
}

演示: http://jsfiddle.net/0et4gq16/

编辑:不应更改行高。

Answer 1

只需手动画线!

p{
    margin: 20px;    
    line-height: 2;
    position: relative;
}
p:after {
    content: " ";
    display: block;
    width: 5px;
    background: green;
    position: absolute;
    left: -5px;
    top: 0.5em;
    bottom: 0.5em;
}

fiddle