css - 見出しに下線を引く - 細い線

Question

このようなものを作りたいと思っています。

見出しのような幅の線しか作成できないので、本当に疲れました。見出しよりも「小さい」行を作成する必要があります。::before で試してみましたが、うまくいきません。それを作成する可能な方法はありますか？

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

Answer 1

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/

Answer 2

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>

Answer 3

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

それがあなたがやろうとしていることであれば、特定の単語の下に単に境界線を置くことができます.