下劃線標題 - 縮小線

我想創建類似這樣的東西。
enter image description here 下劃線標題 - 縮小線

我真的很累，因爲我可以創建只有類似寬度的行像標題。我必須創建「更小」的行然後標題。試過用::做過，但它不適合我。有沒有什麼可能的方式來創建它。

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

來源

2015-02-11 chris880

爲什麼不問爲什麼你':: before'造型不工作（並張貼在這裏的代碼）？那或':: after'是可行的方法來做到這一點。 – ajp15243 2015-02-11 19:35:17

你給過你的'：之前'的內容：'';'規則？ – 2015-02-11 19:37:21

它看起來不像下劃線。請描述你真正想要的，展示你最大的努力（問題本身的HTML和CSS），並指定它如何達不到你想要的。 – 2015-02-11 22:51:06

h1 { 
 
    position: relative; 
 
    text-align: center 
 
} 
 

 
h1:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: -6px; 
 
    width: 130px; 
 
    height: 2px; 
 
    background: red; 
 
    transform:translateX(-65px) /* width/2 */ 
 
}

<h1>some heading here</h1>

來源

2015-02-11 19:36:17

<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>

您可以簡單地把邊框的特定詞下，如果這是你正在試圖做的事。

來源

2015-02-11 19:39:16 SRing

h1 { 
    display: inline-block; 
    position: relative; 
} 
h1::after { 
    content: ''; 
    position: absolute; 
    left: 10%; 
    display: inline-block; 
    height: 1em; 
    width: 70%; 
    border-bottom: 1px solid; 
    margin-top: 5px; 
}

改變寬度你想多長時間要和「左」到線的位置，並增加了「邊距」，使其遠離文本。

http://jsfiddle.net/53zxor2k/1/

來源

2015-02-11 19:41:25 Beck

'left'應該是15px，或者是'（100-width）/ 2' – abl 2015-02-11 20:37:46

下劃線標題 - 縮小線

回答

相關問題