css - 在伪元素上添加换行符

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

根据评论更新

无论标题宽度如何，为了使破折号保持相同的宽度，我简单地设置了带有边框和显示 block 的 :after 伪元素的样式:http://jsfiddle.net/uzVhz/2