blockquoteのcite属性を使って引用元をユーザーに明示する

Result

blockquoteのcite属性に書いた引用元を表示する、というもの
サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です

css

blockquote {
  padding: 20px 20px 20px 40px;
  overflow: auto;
  background-color: rgba(180, 180, 180, 0.5);
  border-radius: 2px;
  font-style: italic;
}
blockquote:before {
  content: '❝';
  float: left;
  font-size: 200%;
  margin-left: -20px;
}
blockquote:after {
  content: "引用元:【"attr(cite)"】";
  display: block;
  text-align: right;
  font-size: 72%;	
}

content:attr(cite);を使ってcite属性に書いた引用元を下部に表示します
上記のように定型文化も出来るので何かと管理しやすいと思います

content: "手前の定型文"attr(cite)"後ろの定型文";

html

<blockquote cite="piyopiyo">
<p>hogehoge</p>
</blockquote>

can i use

勿論、各ブラウザ対応も問題ありません

via

CSS only citation