今回やりたいこと

履歴に「更新履歴」という文字を追加で表示したい

1<div class="history">
22017年3月1日:履歴3
32017年2月1日:履歴2
42017年1月1日:履歴1
5</div>

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


1更新履歴
22017年3月1日:履歴3
32017年2月1日:履歴2
42017年1月1日:履歴1

beforeでやってみる

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

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

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

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

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

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