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