伪元素 :before 和 :after 垂直位置

Question

我试图在<h2> 中垂直定位:before 和:after 伪元素。

每个都放置在float:left 橙色列中，紧挨着另一个包含<p> 的float:left 列。

我想在<h2> 的顶部和底部有一个细边框。

问题是：如果<p> float 列中包含的文本比<h2> 长，则<h2> 的底部边框位于文本列的底部，而不是位于底部<h2> 列。

由于我的“英语不太好”，我做了一个小提琴：http://jsfiddle.net/vcH4T/

我真的很纠结这个:(

提前感谢您的帮助！ 卡米尔

Answer 1

我想在<h2>的顶部和底部有一个细边框。

像这样：

JSFiddle

CSS /* 通用 h2 */

h2 {
    font-size:1.1em;
    line-height: 20px;
    background-color: #d8713c;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    padding: 20px 10px;
    position:relative;
}

h2::before, h2::after {
    content:"";
    position: absolute;
    left:50%;
    width: 10%; /* anything you like */
    margin-left:-5%; /* 50% of width */
    height: 0px;
    border-bottom: 3px solid #efbe94;
}

h2::before {
      top: 7%;  
}

h2::after {
    bottom: 7%;

}