紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a Horizontal Line with CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。 Scalable: フォントのサイズを大きくしても調整される。 Fluid: 可変。 JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央