[HTML & CSS General] CSS: テキストに水平線をオーバーレイする mixin

画像なし。作り方が分からないシリーズ。

調査

それぞれの方法に一長一短があって、使い分けが必要そう。

• [CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス
• [CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック | コリス
• Create Headings with Lines in CSS
• CSS line behind title text – CodePen

mixin

IE8+ で left, center, right 指定。
下記条件で使える形でまとめてみました。

• span が必要。
• 背景が単色。

See the Pen CSS Overlaying a Horizontal Line by DriftwoodJP (@DriftwoodJP) on CodePen.

まとめきれなかった感はありますが、要件は満たせそう。