【HTML】文字付きの水平線を表示させる方法

以下のように記述すると段落の間に水平線を引けます。

<p>第一段落のテキスト。</p>

<hr />

<p>第二段落のテキスト。</p>

水平線の中央にテキストを表示するには以下のようなCSSを記述します。

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr:after {
  background: #fff;
  content: '§';
  padding: 0 4px;
  position: relative;
  top: -13px;
}