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

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

[markdown]
## 調査

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

> * [[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-centered-heading-horizontal-line-by-impressivewebs.html)
> * [[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-heading-side-lines-by-frxnz.html)
> * [Create Headings with Lines in CSS](http://jessica-eldredge.com/2014/01/26/headings-with-lines/)
> * [CSS line behind title text – CodePen](http://codepen.io/ericrasch/pen/Irlpm?editors=110)

## mixin

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

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

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

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