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

Question

在每个 h2 之后，我想附加并设置一个破折号，然后是一个换行符。

我尝试了以下方法：

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

它通常确实有效，但是当我缩小或减小字体大小时，破折号上方和下方的空间都会发生变化，而不仅仅是破折号大小。

我也尝试添加一个line-height: 0.6em;，但它似乎移动了所有东西。

目前我得到这个：

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

score 2 · Accepted Answer

为什么不直接使用边框？

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

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

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

根据评论更新

为了使破折号保持相同的宽度，而不管标题宽度如何，我只是将 :after 伪元素设置为带有边框和显示块的样式：http: //jsfiddle.net/uzVhz/2

1 回答 1