「blockquote」タグを使用しFontAwesomeで中央に引用符を入れたデザインを作りました。
ブログなどで引用する際にご活用ください。
中央に引用符を入れる
before疑似要素で「Font Awesome 5 Free」を使用し引用符を表示。「left: 50%;」「transform: translateX(-50%);」で中央に配置します。
<blockquote>
<p>引用テキストをここに入れます...</p>
</blockquote>
blockquote {
position: relative;
padding: 3rem 1rem 1rem;
line-height: 1.5;border: 1px solid #353535;
background-color: #efefef; color: #353535;
}
blockquote::before {
position: absolute;
top: 0.2rem;
left: 50%;transform: translateX(-50%);
font-family: "Font Awesome 5 Free";
font-weight: 900; font-size: 1.5rem;
content: "\f10d";
}
上下に境界線を入れる
「border-top」「border-bottom」で上下に境界線を入れてます
blockquote {
position: relative;
padding: 3rem 1rem 1rem;
line-height: 1.5;
border-top: 1px solid #353535;
border-bottom: 1px solid #353535;
color: #353535;
}
blockquote::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.5rem;
content: "\f10d";
}
背景を青にする
「background-color」で背景を青に。before疑似要素の「color」で引用符も薄い青色にしてます
blockquote {
position: relative;
padding: 3rem 1rem 1rem;
line-height: 1.5;
border-radius: 0.5rem;
background-color: #5a9bfc;
color: #fff;
}
blockquote::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
color: #b5d9fc;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.5rem;
content: "\f10d";
}
