このエントリーの結論 ／ 変更するまで ／変更後

このエントリーの結論

「display:inline-block;」指定した要素の直後を改行するためには、「display:inline-block;」自体を「display:table;」へ変更します。
※「display:table;」へ変更しても、横幅は文字列の長さのままです。

display:table;

ブロックレベルボックスを定義
HTML の <table> 要素と同じように動作しますが、tableタグが生成されるわけではありません。

変更するまで

▼HTML

<div class="hoge">

  <!--  任意のhtml要素 -->

  <hr>

  <h2>あいうえお</h2>

  <h3>かきくけこ</h3>

</div>

▼CSS

h2 {

  display: inline-block;

  border-bottom: 1em solid red;

}

h3 {

  display: inline-block;

  border-bottom: 1em solid blue;

}

変更後

▼CSS

h2 {

  display: table;

  border-bottom: 1em solid red;

}

h3 {

  display: table;

  border-bottom: 1em solid blue;

}