CSS如何製作一個完全分配的左邊界（或右邊界）？

Question

我試圖在純CSS來實現的設置引導3面板的左邊框：

下面是做到這一點的strandard方式：

.panel-default>.panel-heading.standard { 
    border-left: 5px solid red; 
} 

這裏使用僞元素：

.panel-default>.panel-heading.pseudo:before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: " "; 
    display: block; 
    width: 4px; 
    height: 100%; 
    background-color: blue; 
} 

在這兩種情況下結果都不正確。用標準的方式，邊界有點「傾斜」（只在右下角，爲什麼？），用僞元素可以使矩形邊界爲負（即-1，-1），但是我需要知道確切的標題的高度：

Answer 1

你不需要知道標題的確切高度，只邊界的高度。因此，舉例來說，如果在頂部和底部的邊框都1px的：

.panel-default>.panel-heading.pseudo:before { 
    position: absolute; 
    top: -1px; 
    bottom: -1px; 
    left: 0; 
    content: " "; 
    display: block; 
    width: 4px; 
    background-color: blue; 
} 

演示：http://jsfiddle.net/sbr3q2tq/