css - 伪元素 :before and :after vertical position

Question

我正在尝试垂直定位 :before和 :after <h2> 中的伪元素.

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

我想要在 <h2> 的顶部和底部, 细边框。

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

因为我的“英语不太好”，我做了一个 fiddle :http://jsfiddle.net/vcH4T/

我真的被这个困住了:(

在此先感谢您的帮助!卡米尔

Answer 1

I'd like to have at the top and the bottom of the <h2>, a thin border.

像这样:

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%;

}