css - 使用 CSS 为标题添加彩色边线

Question

我正在尝试使用 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 属性)，但我希望它们垂直居中于标题的高度。有什么想法吗？

Answer 1

在你的 H2 上使用 position:relative 并使用 position:absolute 并为你的 :before 使用适当的上/左/右/下> 和 :after。