下划线标题 - 较窄的线答案

【问题标题】：Underline heading - narrower line下划线标题 - 较窄的线
【发布时间】：2015-04-12 07:54:24
【问题描述】：

我想创建这样的东西。

我真的很累，因为我只能创建与标题类似宽度的线。我必须创建“较小”的行然后标题。尝试使用 ::before 完成它，但它对我不起作用。有没有可能的方法来创建它。

<h1>Some heading here</h1>

http://jsfiddle.net/53zxor2k/

【问题讨论】：

为什么不问为什么你的::before 样式不起作用（并在此处发布该代码）？那或::after 是可行的方法。
你给你的:beforecontent:' ';规则了吗？
它看起来根本不像下划线。请描述你真正想要什么，展示你的最大努力（问题本身中的 HTML 和 CSS），并说明它是如何无法实现你想要的。

标签： css line underline heading

【解决方案1】：

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    */
}

&lt;h1&gt;some heading here&lt;/h1&gt;

【讨论】：

【解决方案2】：

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

如果您正在尝试这样做，您可以简单地在特定单词下添加边框。

【讨论】：

【解决方案3】：

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/

【讨论】：

left 应该是 15px，或者(100 - width) / 2
将标题设为inline-block 的问题在于它不再按预期运行。通过在标题后添加段落来轻松演示：jsfiddle.net/6v4mjcaq