スポンサーリンク

[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。

作成日時と更新日時を2段になるようにしました。

こちらがCSSです。

.entry-header .date-tags {
	order: 3;
	color: #a8abb1;
	font-size: 16px;
}
.entry-header .date-tags .post-update:after {
			content: "\A" ;
			white-space: pre ;
}

少し、文字の色や大きさも変更していますが、メインになるのは、「:after」の内容(content)と空白文字(white-space)の仕方です。

「content: “¥A”」は、改行文字を表しています。

しかし、HTMLの場合はそのままでは改行文字は無視されてしまいます。そこで、「white-space: pre」にしています。

このプロパティは空白文字を「pre」、つまり、そのまま表示します。

タイトルとURLをコピーしました