0

我正在尝试使用 CSS 将彩色边线添加到页面上的标题中，这就是我迄今为止提出的（使用 LESS 因此嵌套属性） -

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:relative在您的 H2 上使用, 并为您的and使用position:absolute正确的顶部/左侧/右侧/底部。:before:after

于 2012-08-07T19:09:51.017 回答