CSS でblockquote（引用）の装飾を作る

こんにちは。ましじめの田村です。

CSS でblockquote（引用）の装飾を作る方法です。 Google Fonts のMaterial iconsを使って左上右下にアイコンを置いています。

マテリアルアイコンの使い方はリンクを指定して使用するか、ダウンロードして使用するか
となります。詳しい使い方は公式サイトを確認ください。
Icon font for the web

//マテリアルアイコンリンク
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<blockquote class="e-blockquote">
 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
</blockquote>

.e-blockquote {
  border: 1px solid #ccc;
  line-height: 1.7;
  position: relative;
  margin: 0;
  padding: 30px 60px 30px 60px;

  &::before,
  &::after {
    display: block;
    position: absolute;
    content: 'format_quote';
    width: 40px;
    height: 40px;
    font-family: 'Material Icons';
    font-size: 40px;
    white-space: nowrap;
    word-wrap: normal;
    color: #ccc;
  }

  &::before {
    top: 20px;
    left: 10px;
    transform: rotate(-180deg);
  }

  &::after {
    right: 10px;
    bottom: 20px;
  }

}

blockquote（引用）の装飾を作る場合に参考にしてみてください。