引用文にカギ括弧つける

■引用文にカギ括弧をつける■

 

blockquote 内の文章の前後にCSSで自動的にカギ括弧を加えられます。まずは blockquote
要素に quotes プロパティーで前後に利用するカギ括弧を指定。(もちろんカギ括弧以外の文字列でもOK!)
そして :before と :after にそれぞれ open-quote と close-quote を指定してやれば、文章の前後にカギ括弧が表示されます。

 

▲HTML▲

 

<blockquote>
認識の相違から生じた判断ミスを後悔する時、何故か人間は他者を憎悪するんだよね。
</blockquote>

<blockquote>
真実なんて知りたくもないはずなのに、それでも追い求めずにはいられないなんて、つくづく人間の好奇心というものは理不尽だね。
</blockquote>

 

▲CSS▲

blockquote {
quotes: “「” “」”;
margin: 30px;
padding: 20px;
border-left: 5px #ccc solid;
background: #eee;
line-height: 1.5;
}
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}