見出しの一部に下線を付ける方法（例：最初の40ピクセル）

Question

シンプルなCSSでは、見出しに部分的にのみ下線を付けることができますか？具体的には最初に50pxを左にしますか？

Answer 1

あなたは:before擬似要素を使用して、それに境界線を追加することができます。

h1 { 
 
    position: relative; 
 
    line-height: 1.2em; 
 
} 
 
h1:before { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 1.2em; 
 
    height: 0; 
 
    width: 50px; 
 
    content: ''; 
 
    border-top: 1px solid red; 
 
}

<h1>This is a header, partly underlined</h1>

Answer 2

使用pseudo-element：

h1 { 
 
    position: relative; 
 
} 
 
h1::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; left: 0; 
 
    width: 50px; 
 
    height: 2px; 
 
    background-color: green; 
 
}

<h1>foobar</h1>

Answer 3

あなたは下線を付している非改行スペースのカップルを含む擬似要素を追加することができます。この方法では、境界の代わりに実際の下線を取得します。しかし、それはまだ "g"のような手紙の上を横切るでしょう。

h1::before { 
 
    content:'\a0\a0\a0\a0\a0\a0\a0\a0'; 
 
    display:block; 
 
    position:absolute; 
 
    text-decoration:underline; 
 
    width:50px; 
 
    overflow:hidden; 
 
}

<h1>Headline</h1> 
 
<h1>Another Headline</h1>