【HTML/CSS】テキストの左右に線を引く [IE8対応]

001

先日仕事で設置する必要があり、コリスさんの記事を参考にしましたが、IE11でバグが発生してすぐには使えませんでした。

というわけで、htmlタグを組み合わせた古いやり方でIE8~11まで表示させます。
万能性はないので、あくまで時間がないときの応急処置です。

目次

検証済みブラウザとOS

  • IE 8~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan
  • iOS 9
  • Android 4.1 / 5 / 6

 

要点とコード

code

  • div / span に relative を、b に aboslute を指定して、擬似的に線のように見せる
  • テキストカラーと b タグの背景色を同一にする

 

弱点

bug

  • 2行以上になると崩れる
  • 定義タグ、リストタグなどでは使えない
    • このエントリーをはてなブックマークに追加