シンプルで分かりやすい引用(Blockquote)デザインのスタイルサンプルとソース

Simple and Nice Blockquote Styling | CSS-Tricks

サイトをリニューアルして、引用符のデザインがイマイチ気に入らなかったのでネットを探したところ、海外サイトのCSS-Tricksで公開されている引用符のソースがシンプルで自分好みだったので借りることにしました。

というわけで、また使いたくなった時のためにWEBメモ。

blockquote pのdisplay: inlineは引用内でpタグで改行できなくなるので削除。

するとデザインが崩れるので、

blockquote {
margin: 0.5em 5px;
padding: 0 0.5em;
}

blockquote:before {
position: absolute;
margin-right: 0.1em;
margin-top: 0.4em;
}

blockquote p {
margin-left: 1.5em;
}

赤字を追加、青字のところは数字を修正。

するとこんな感じに。