[CSS]beforeで簡易的な見出しを作る

** 今回やりたいこと
履歴に「更新履歴」という文字を追加で表示したい

<div class="history">
2017年3月1日:履歴3
2017年2月1日:履歴2
2017年1月1日:履歴1
</div>

これを次のように表示したいのです。


更新履歴
2017年3月1日:履歴3
2017年2月1日:履歴2
2017年1月1日:履歴1

** beforeでやってみる
cssの擬似クラス、before, afterは、指定スタイルの前(後)にコンテンツを差し込むことができます。

これを利用し、.historyクラスの beforeを定義して「更新履歴」というテキストを挿入 することにします。

.history:before {
  content:"更新履歴\A";
  white-space: pre;
}

\Aという見慣れないものがありますね。
これは改行を表すエスケープ文字です。

BRタグをcontentに書いても解釈せず、そのままBRと表示されてしまうため、このように対処します。

CSS、、、わかってしまえば簡単ですよね!

CSSのおすすめ書籍

いちばんよくわかる は説明が丁寧なので、よくわかりますよー

こちらも、入門には良さそうですね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
コメントの入力は終了しました。