0

CSSを使用して、ページの見出しに色付きのサイドラインを追加しようとしています.

h2 {
    font-size: 2em;
    color: @black;
    position: relative;
    text-transform: uppercase;
    &:before {
        position: absolute;
        top: 1em; // 50% of h2 font-size
        left: 100px;
        content: '';
        border-bottom: 1px solid @orange;
        width: 100px;
    }
    &:after {
        position: absolute;
        top: 1em;
        right: 100px;
        content: '';
        border-bottom: 1px solid @orange;
        width: 100px;
    }
}

これにより、見出しの両側の下部に (border-bottom プロパティを使用して) 行が表示されますが、見出しの高さの垂直方向の中央に配置する必要があります。何か案は？

4

1 に答える 1

1

position:relativeH2で、を使用しposition:absolute、およびに適切な上/左/右/下で使用し:beforeます:after。

于 2012-08-07T19:09:51.017 に答える