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;
}

将宽度更改为您想要的长度，将“左侧”更改为线条所在的位置，并增加“margin-top”使其离文本更远。

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