左邊有一些文字的線

我試圖用左邊的一些文字製作水平線。例如：左邊有一些文字的線

如何使用CSS實現呢？

我已經這樣做了，但沒有得到預期的結果

h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line- 
height:0.1em; margin:10px 0 20px; } 
h2 span { background:#fff; padding:0 10px; }

來源

2017-05-30 Dipankar Das

退房['：before'（https://developer.mozilla.org/en-US/docs/Web/CSS/::before），並看到它在行動：https://jsfiddle.net/no3s54ro/ – Marvin

謝謝@Marvin :) –

在仔細閱讀你的問題後，對於你的場景，'：after'元素將完成這項工作。要填充右側剩餘空間的行，請查看* [帶有填充雙方剩餘空間的行的標題]（https://stackoverflow.com/q/30591488/3162554）*或其他一些問題在stackoverflow上。 – Marvin

線路可以佔據由文本（fluiiiid）留下空間，Flexbox的奇觀：Codepen

無需要一個範圍：該行是一個：僞。
爲了更好的兼容性，佈局應該可以使用佈局（CSS，而不是標記），但我不關心IE8/9。

h2 { 
 
    display: flex; 
 
    justify-content: stretch; 
 
    align-items: baseline; 
 
    margin: 0.625rem 0 1.25rem; 
 
    line-height: 1.5; 
 
    text-transform: uppercase; 
 
    color: #444; 
 
} 
 

 
h2:after { 
 
    content: ''; 
 
    flex-grow: 1; 
 
    border-bottom: 1px solid #444; 
 
    margin-left: 0.5rem; 
 
}

<h2>work</h2> 
 
<!-- SO 44257291 -->

來源

2017-05-30 08:52:32 FelipeAls

左邊有一些文字的線

回答

相關問題