before, after 擬似要素でblockquoteを表現する

ある書物やサイトなどからの抜粋文をサイト内に掲載する場合、その部分が“ 引用 ”であることを明示的に「blockquote」で表現するか、説明書きを添えて、「ここは引用文ですよ！」と言った感じにわかりやすく記載しておく必要があります。

その際に、独自のデザインで表現したいな～。なんて時には、引用符の「画像」とCSS３の擬似要素「before/after」を使用して表現する方法があります。

【やり方】

1.引用符の画像を用意

サンプル用に以下の画像を使用します。よろしければご自由にお使いください。

（左上配置）

（右下配置）

2.HTMLを記述

<blockquote class="quoteArea">
	ここの文章はWikipediaより抜粋させて頂いております。
	ここの文章はWikipediaより抜粋させて頂いております。
	ここの文章はWikipediaより抜粋させて頂いております。
	ここの文章はWikipediaより抜粋させて頂いております。
	ここの文章はWikipediaより抜粋させて頂いております。
	ここの文章はWikipediaより抜粋させて頂いております。
</blockquote>

ここの文章はWikipediaより抜粋させて頂いております。

</blockquote>

<blockquote>タグにクラス名 .quoteArea を指定しています。

3.CSSを記述

.quoteArea { 
	color: #333;
	padding: 1.5em 3.5em;
	position: relative;
	width:400px;
}
.quoteArea::before, .quoteArea::after {　//共通の設定
	background-color: #cccc99;
	border-radius: 50%;　//背景に円を描いています
	color: #666;
	line-height: 3.0em;
	height: 3.0;
	position: absolute;
	text-align: center;
	width: 3.0em;
}
.quoteArea::before {
	content: url("../images/b-before.png");　//imagesフォルダに画像を用意します
	left: 0;
	top: 0;
}
.quoteArea::after {
	content: url("../images/b-after.png");　//imagesフォルダに画像を用意します
	bottom: 0;
	right: 0;
}

.quoteArea {

color: #333;

padding: 1.5em 3.5em;

position: relative;

width:400px;

}

.quoteArea::before, .quoteArea::after {　//共通の設定

background-color: #cccc99;

border-radius: 50%;　//背景に円を描いています

color: #666;

line-height: 3.0em;

height: 3.0;

position: absolute;

text-align: center;

width: 3.0em;

}

.quoteArea::before {

content: url("../images/b-before.png");　//imagesフォルダに画像を用意します

left: 0;

top: 0;

}

.quoteArea::after {

content: url("../images/b-after.png");　//imagesフォルダに画像を用意します

bottom: 0;

right: 0;

}

全体を囲っている.quoteAreaに対して position:relative を指定しておき、.quoteArea::before と .quoteArea::after で画像を position:absolute で絶対配置にします。

4.完成

以上になります。