CSSでテキストの横に線を引く方法について

サイトやブログを管理していて、テキストの左右に線を引きたい時ってありませんか？
実はこれCSSで表現することができます。

その方法は何通りかあるようですが、今回は個人的にいつも使っているFlexBoxというCSSを使った方法をご紹介したいと思います。

ちょっとした見せ文字や、見出しなんかに使うと印象が変わりますので、ぜひ使ってみてください。

タップできる目次

追加するCSS
まとめ

追加するCSS

はてなブログの日付に反映させてみる

では、今回ははてなブログのタイトルまわりの日付の部分に線を引くという話で進めたいと思います。

コピペでも反映できますので、クラス名だけ任意で変更して試してみてください！その際には必ずバックアップしておきましょう。

まず、はてなブログの日付にはこちらのクラス名が付与されています。

entry-date date first

クラスは半角スペースで複数の要素を指定することができるので、この場合は「entry-date」「date」「first」という3つの要素のどれかに対してプロパティと値を追加すると日付の箇所に反映されるというわけです。

では、今回は「date」というクラス名に追加していきたいと思います。
※スマホにも適応させたい場合はスタイルを<style>〜</style>で囲むこともお忘れなく！

左右両方に線を引く場合

dateという要素に以下のプロパティを追加します。

.date {display:flex; align-items:center; text-align:center;}

.date:before {margin-right:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}

.date:after {margin-left:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}

するとこんな感じに表現できます。（下記サンプルではクラス名をdate_20170331としてあります。）

【サンプル】

.date_20173031 {display:flex; align-items:center; text-align:center;}

.date_20173031:before {margin-right:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}

.date_20173031:after {margin-left:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}

flexについて説明するとここでは書ききれない程の情報量となってしまうので、省略しますが、簡単に説明するとdateボックスにflexを指定してalign-itemsによって上下中央に設定します。

あとは疑似要素を利用して空のコンテンツにボーダーを設定し、flex-growで自由に伸ばしているだけです。これによってテキストの文字数に関係なく横幅いっぱいに線が表示されます。簡単ですね！

疑似要素についてはこちらもご覧ください。

レスポンシブデザインに便利なcss3の疑似クラスと疑似要素2015年4月21日からのモバイルフレンドリーに対応するために、多くの方がレスポンシブデザインを取り入れたかと思いますが、今回はその過程...

テキストは左寄せで右に線を引く場合

先ほどのCSSでテキストの中央揃えと、左の線のプロパティを削除するだけです。

.date {display:flex; align-items:center;}

.date:after {margin-left:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}

こちらもこんな感じですね。（下記サンプルはクラス名をdate_20170331_rightとしてあります。）

【サンプル】

.date_20173031_right {display:flex; align-items:center;}

.date_20173031_right:after {margin-left:5px; border-top:1px solid #ccc; content:""; flex-grow:1;}