使用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的適當頂部/左側/右側/底部。