CSSの疑似要素beforeとafterの使い方を徹底解説

beforeとafterの使い方

今回はCSSの超便利な疑似要素「after」と「before」について解説します。使い方を理解すれば、本当に幅広い表現ができるようになります。

1. 疑似要素のbeforeとafterとは?

タグと要素

要素とは、タグとタグではさまれた1つのカタマリを表します。たとえば、<h1>ほにゃらら</h1>は1つの要素になります。

CSSの::after::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる」のです。

どのような形でCSSに登場する?

::before::afterは以下のような形でCSSに書かれます。

CSS
h1::before {
	content: '内容';
	〜スタイル指定〜
}

.example::after {
	content: '内容';
	〜スタイル指定〜
}

タグ名やクラス名、id名などの後に::before::afterをつけるわけですね。content:''内には、挿入したい文字などを書きます。具体的な書き方は後ほど詳しく解説します。

beforeとafterの違いは?

beforeとafterの違い

::beforeを使うと要素の直前に要素もどきが挿入されます。一方で::afterを使うと要素の直後に要素もどきが挿入されます。

afterとbeforeの違い

このようなイメージですね。content:''の中には挿入したい文字などを入れます。

たとえば、pタグの直前に疑似要素を使って「Hello!」という文字列を入れてみます。↓

疑似要素の使い方

ブラウザ表示例

↑HTMLでは「こんにちは」としか書かれていないのですが、CSSでその直前に「Hello!」という文字を挿入することができるわけですね。

疑似要素を使うメリット

afterやbeforeがものすごく便利なのは「HTMLコードを汚すことなく様々な表現ができる」ということです。なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずにユーザーのための自由な表現ができるのです。

Ada

1つ例を紹介します。これはサルワカで以前作った「美しい文字のデザインを紹介するページ」のタイトルです。英語の文字を大きく見せたかったものの、h1タグには日本語を使いたいと考えました。

Ada

そこでh1タグ内には日本語を入れ、その前に疑似要素で英語の文字を挿入しました。つまり、英文はHTMLには書かれていないのです。これなら、英文が検索エンジンに重要だとみなされてインデックスされる心配はありません。

ちょっとマニアックな話になってしまいました。「何を言っているかよく分からない」という方は理解しなくても全く問題ありません。

対応ブラウザ

beforeとafterはほとんどのブラウザで対応しています。気になるとすればIEかもしれません。IEは8〜の対応となっています。6、7では対応していません。とはいえ、これらを合わせても2017年現在の世界全体のブラウザシェアのうちわずか0.05%程度です(参考:CANIUSE)。気にせず使ってしまって問題ないでしょう。

コロン(:)の数は?

疑似要素には、コロンが1つ:beforeの書き方と、コロンが2つ::beforeの書き方があります。

コロンの数

CSSの最新規格であるCSS3では疑似要素はコロン2つを書く決まりとなっています。以前のCSS2ではコロンの数が1つでした。

つまり「コロン2つ」を使えるのは、CSS3に対応しているブラウザだけです。一方で「コロン1つ」ならCSS3に対応していないブラウザでも表示できます。つまり、ゆくゆくは「コロン2つ」になるけれども今は「コロン1つ」の方が多くのブラウザで使えるということですね。

beforeとafterの書き方と活用例

ここからはbefore/afterの具体的な書き方と活用例を紹介したいと思います。

文を記号ではさむ

たとえば、class="example"の要素の前後にカゴカッコ『』をつけるように指定してみましょう。

HTML
<p class="example">これは例文です</p>
CSS
.example:before{
	content: '『';
	color: skyblue;/*色を変える*/
}

.example:after{
	content: '』';
	color: skyblue;/*色を変える*/
}

ブラウザ表示例

content:''の中に挿入したい文字列を入れます。文字は水色にしてみました。このように疑似要素は普通の要素と同じようにスタイルの指定ができます。

文の直前にカッコよく英文を入れてみる

HTML
<h1 class="example">ここにタイトルを書きます</h1>
CSS
.example {
	text-align: center; /*中央寄せ*/
}

.example:before{/*疑似要素*/
	content: 'TITLE HERE';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
}

ブラウザ表示例

このように本文の前にかっこよく英文を入れることなんかもできます。display: blockとすると、前後に改行が入るようになります。詳しくは以下の記事が参考になるかと思います。

ちなみに疑似要素の文字列を好きな位置で改行する方法は以下の記事で解説しています。

絶対配置で好きな位置に表示させる

before/afterをposition: absoluteで絶対配置にすることで、自分の好きな位置に配置できるようになります。

角に好きな文字を配置

たとえば、元の要素の左上の角に寄せたいときはこの図のように書きます。絶対配置にしてtop:0 left:0とするわけですね。このとき親要素をposition:relativeにするのを忘れないようにしましょう。

positionがよく分からないという方は以下の記事を読んでみてください。

実際に書いてみましょう。

HTML
<h1>こんにちは</h1>
CSS
h1 {
	position: relative;
	padding: 1em;/*要素内の余白*/
	background: silver;/*背景色*/
}
h1:before{/*疑似要素*/
	position: absolute;
	content: 'ラベル';
	top: 0;
	left: 0;
	color: white;/*文字色*/
	padding: 0.2em;/*余白*/
	background: #F89174;/*背景色*/
}

ブラウザ表示例

要素の左上に「ラベル」と書かれた疑似要素が表示されるようになりました。ちなみに絶対配置の場合、beforeをそのままafterに変えても全く同じ表示になります。

アイコンフォントを使う例

アイコンフォントを疑似要素で表示させることもできます。たとえばFontAwesomeを使うなら以下のように書きます。

CSS
◯:before {
	font-family: FontAwesome;
	content: '\f1e2';
}

font-family名はFontAwesomeと書きます。\f1e2というのはアイコン種類を指定するユニコードです。

ユニコードをコピーする

ユニコードは各アイコンのページの「Unicode:〜」というところで確認できます。コードの前には\をつけましょう。

使用例

HTML
<h3>見出しにアイコンを使おう</h3>
CSS
h3:before
{
  font-family: FontAwesome;
  content: "\f00c";
  padding-right : 5px;/*文字との隙間*/
  color: #f89174;/*アイコンの色*/
}

見出しにアイコンを使おう

FontAwesomeを使った見出しや箇条書きの表現については、こちらの記事で詳しく解説しています。

引用ボックスを作る

アイコンを絶対配置でうまく指定すれば、引用文をそれらしく装飾することができます。

HTML
<blockquote>
	<p>これは引用の文章です。</p>
</blockquote>
CSS
blockquote{
	position: relative;
	background: #EFEFEF;/*背景色*/
	padding: 20px 10px 15px;/*ボックス内の余白*/
}

blockquote:before{
	position: absolute;
	font-family: FontAwesome;
	content: '\f10d';
	top: 10px;/*上からの距離*/
	left: 10px;/*左からの距離*/
	color: silver;
	font-size: 1.5em;
}

引用ボックス風の表示

手順リストを作る

次にFontAwesomeの指差しアイコンを使ってフローチャート的なものを作る例を紹介します。手順解説をしたいときに便利です。

HTML
<ul class="flow">
	<li>最初はこれ</li>
	<li>次にこれ</li>
	<li>最後はこれ</li>
</ul>
CSS
.flow {
	text-align: center;/*中央寄せ*/
	list-style-type: none;/*ポチ消す*/
}
.flow li:not(:last-child):after{
	font-family: 'FontAwesome';
	content: '\f0a7';
	display: block;/*前後に改行*/
	font-size: 2em;/*アイコンサイズ*/
	color: skyblue;/*色*/
	padding: 0.3em;/*余白*/
}

ブラウザ表示例

この例では、liの後に疑似要素でアイコンを表示するようにしています。li:not(:last-child):afterというのは『li:afterを指定するが、最後のliは除く』という意味の指定になります。ちょっと分かりづらいですね。気になる方はおさえておきたいCSSのセレクタ25種類を読んでみてください。

疑似要素で画像を表示する

content:''の中にurl(画像のパス)を書くことで、疑似要素として画像を表示させることもできます。

HTML
<a href="/" id="example">サルワカのリンクはこちら</a>
CSS
#example:before {
	content: url(../img/saruwakakun.png);
	display: block;/*前後に改行を入れる*/
	}

画像を表示する例

なお、疑似要素で表示させた画像のサイズはwidth:◯◯pxと書いても変更することはできません。画像サイズの変更方法は以下の記事で紹介しているので、参考にして頂ければと思います。

ふきだしを作る

ボックスの前後に三角形の疑似要素をつけることで、ふきだしを作ることもできます。

HTML
<p class="example">コメントを入れます</p>
CSS
.example {
	position: relative;
	background: #EFEFEF;
	width: 300px;/*吹き出し幅*/
	padding: 20px;/*内側の余白*/
	border-radius: 10px;/*角の丸み*/
	margin-bottom: 30px;/*下の余白*/
}

.example:before {
	position: absolute;/*絶対配置*/
	content: '';/*空に*/
	border-top: 20px solid #EFEFEF;/*三角を作る*/
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	top: 100%;/*下にフィット*/
	left: 50%;/*中央配置*/
	transform: translateX(-50%);/*一応ズレを補正*/
}

吹き出しを作る例

contentは空でもOK!

上の例ではcontent: ''となっています。文字や画像などを使わずにデザインを変えたいときには、このようにcontentを空にすればOKです。なお、content:''の指定を忘れると、疑似要素が全く表示されなくなるので注意しましょう。

最後に

ここまでbeforeとafterの使い方と活用例を紹介してきました。この他にも本当にたくさんの表現ができるので、気になる方は是非ググってみてください

サルワカ