Question

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

每个列都放在float:left橙色列中，旁边是包含float:left的另一个<p>列。

我希望在<h2>的顶部和底部有一个薄边框。

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

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

我真的坚持这个:(

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

Answer 1

我希望在<h2>的顶部和底部有一个薄边框。

像这样：

JSFiddle

CSS / * generic 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%;

}

伪元素：在垂直位置之前和之后：

1 个答案: