在伪元素上添加换行符

Question

在每个h2之后，我想追加并设置短划线，然后换行。

我尝试了以下内容：

h2:after {
    content: '\A\2014';
    white-space: pre;
    font-size: 70px;
}

它确实有效，但当我调整或减小字体大小时，短划线上方和下方的空间都会改变，而不仅仅是破折号。

我还尝试添加line-height: 0.6em;，但它似乎可以移动所有内容。

目前我正在接受这个：

我想得到这个，能够改变空间：

以下是FIDDLE

Answer 1

为什么不使用边框？

h2 { border-bottom: 4px solid #000; } 

然后你可以调整H2底部的填充：

h2 { padding-bottom: 15px; border-bottom: 4px solid #000; }

基于评论的更新

为了使短划线保持相同的宽度，无论标题宽度如何，我只需设置：带有边框的伪元素和显示块：http://jsfiddle.net/uzVhz/2