Blockquote

引用表示用のCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO

いろはにほへとちりぬるを

引用元:サイト名
  • HTML
  • CSS

引用元:
.bq {
      margin: 0 auto 16px;
      padding: 16px;
      border-radius: var(--radius-xm);
      background: var(--bg-disabled);
    }
    .bq::before {
      content: '\e244';
      width: 40px;
      height: 40px;
      font-size: 3rem;
      font-family: 'Material Icons';
      color: var(--overlay);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bq-txt {font-style: italic;}
    .bq-cite {
      font-size: var(--typo-min);
      text-align: right;
      color: var(--overlay);
      display: block;
    }
    .bq-link {
      font-style: normal;
      color: inherit;
    }
    .bq-link:hover {text-decoration: underline;}