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(--txt-light);
  display: flex;
  justify-content: center;
  align-items: center;
}
.bq-txt {
  margin-bottom: 8px;
  font-style: italic;
}
.bq-cite {
  font-size: var(--typo-min);
  text-align: right;
  color: var(--txt-light);
  display: block;
}
.bq-link {color: inherit;}
.bq-link:hover {text-decoration: underline;}