引用ブロックのデザインをすっきりさせました。
◆ タップできる目次 ◆
前後のデザインの比較
もとはこんな感じで

こうしました。

引用符を枠線の外に出すことで、ちょっとすっきりしてませんか?
CSSコードはこちら
/**
* 引用をすっきりさせた
* */
.entry-content blockquote:before, .entry-content blockquote:after {
position: absolute;
width: 0.5em;
color: #a08010;
background: white;
}
.entry-content blockquote:before {
height: 0.5em;
left: -.1em;
top: -0.2em;
}
.entry-content blockquote:after {
right: -.1em;
bottom: -0.6em;
line-height: 1em;
}
.entry-content blockquote {
border-color: #a08010;
background: white;
padding-top: 0;
padding-bottom: 0;
}
ブロック要素に幅・高さがないと背景色をつけられない
ポイントとしては、block:before, block:afterの要素に幅と高さ(line-height, height)を設定して、塗りつぶし(background)をしました。
これに気づかず、なんども背景色を変更しては、うまくいきませんでした。

最近、CSSの勉強が楽しいです
こちらもどうぞ

ブログの絵文字のサイズを小さくした【CSSのクラス指定】
教室のブログを見ていたら、気になる点が…… わかりますか? 絵文字の部分が不自然に大きいんです。 しかも、灰色の枠までついている。 ということで、CSSをちょっといじります。 デベロッパーツールでCSSを確認する Chromeのデベロッパー...

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた
Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。 ビフォー・アフターを比べる 元のデザインがこれで ちょっとラベルボックスに比べると間延びしている気がします。 こんなふうにしました...
QRコードを読み込むと、関連記事を確認できます。
![[Cocoon] 引用ブロックをすっきりさせた](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2020-09/css-blockquote-cocoon/)