2019年08月23日(金)

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

• 0
• 0
• 12
• 7

Result

See the Pen CSS only citation by kachibito
(@kachibito) on CodePen.

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%; }

...