CSS如何制作完美对齐的左（或右）边框？

Question

我想在纯CSS中完成的是设置Bootstrap 3面板的左边框：

以下是这样做的方法：

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

两种情况下结果都不正常。按照标准方式，边界有点倾斜＆＃34; （仅在右下角，为什么？），使用伪元素我可以使矩形边距为负（即-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/