CSSの擬似要素beforeとafterを完全ガイド！初心者でもわかる装飾テクニック

擬似要素::beforeと::afterの基本と装飾例

先生と生徒の会話形式で理解しよう

生徒

「ホームページの見出しの前に、ちょっとした飾りやアイコンを付けたいのですが、HTMLに直接書くしかないのでしょうか？」

先生

「そんなときはCSSのbeforeやafterという擬似要素を使うと、HTMLを汚さずに装飾を追加できますよ。」

生徒

「擬似要素…ですか？何だか難しそうですが、私にも使えますか？」

先生

「もちろんです！文字の前後に『空の箱』を作るイメージを持てば簡単です。基本から丁寧に見ていきましょう！」

1. 擬似要素beforeとafterの基本的な役割を知ろう

ウェブ制作の世界には、擬似要素（ぎじようそ）という便利な仕組みがあります。これは、HTMLのソースコード（設計図）には存在しない要素を、CSSの力だけで仮想的に作り出すものです。その中でも代表的なのが、::before（ビフォー）と::after（アフター）です。

パソコンを初めて触る方に分かりやすく説明すると、文字が入った箱の「前」や「後」に、透明な付箋をペタッと貼るようなイメージです。HTML側に「飾り用の文字」や「画像用のタグ」をわざわざ書き足す必要がないため、管理がとても楽になります。Googleの検索エンジンも、無駄なコードが少ない綺麗なサイトを好むため、SEO対策としても非常に有効なテクニックです。

2. contentプロパティは魔法の合言葉

擬似要素を使う上で、絶対に欠かせない命令があります。それがcontent（コンテント）プロパティです。これを使わないと、どんなに色やサイズを指定しても画面には何も表示されません。例え飾りが「ただの四角い色面」であっても、content: "";という風に、「中身は空っぽだけど存在していますよ」と宣言してあげる必要があります。

この命令は、いわば擬似要素に命を吹き込む魔法の合言葉です。文字を入れたいときはダブルクォーテーションの中にテキストを書きますし、飾りだけなら空っぽのままにしておきます。初心者の方は、まずこの「contentを書く」というルールを忘れないようにしましょう。これだけで、デザインの幅がグッと広がります。

3. 見出しの前に可愛い四角のアクセントを付ける

それでは、具体的な装飾例を見ていきましょう。まずは見出しの文字の前に、小さな色のついた四角を表示させる方法です。これは、ブログのタイトルを際立たせるのによく使われる手法です。

HTMLはシンプルな見出しタグのまま、CSSで「::before」を指定して、サイズ（widthやheight）と背景色（background-color）を決めるだけです。これだけで、一気にプロが作ったような洗練されたデザインに変わります。難しい画像編集ソフトを使わなくても、コードだけでこれだけの装飾ができるのはCSSの大きな魅力です。


<style>
	/* 見出しの前に青い四角を表示する */
	.accent-title::before {
		content: "";
		display: inline-block;
		width: 10px;
		height: 25px;
		background-color: #007bff;
		margin-right: 10px;
		vertical-align: middle;
	}
	.accent-title {
		font-size: 24px;
		color: #333;
	}
</style>

<h2 class="accent-title">本日のニュース</h2>

ブラウザ表示

本日のニュース

4. リンクの後ろに矢印アイコンを自動追加する

次に、ウェブサイト内のリンク（aタグ）の後に、「ここをクリックできますよ」と伝えるための矢印を追加してみましょう。ここでは「::after」を使います。全てのリンクに対して手作業で矢印を打つのは大変ですが、CSSを使えば一瞬で全てのリンクに装飾を施せます。

ここでは、Bootstrapアイコンの記号や、シンプルな「＞」という文字を使ってみましょう。ユーザーが次にどこへ行けばいいかを示す親切な設計は、ユーザビリティの向上に繋がり、結果としてサイトの評価を高めます。初心者でも真似しやすい定番のカスタマイズです。


<style>
	/* リンクの後に矢印を追加する */
	.arrow-link::after {
		content: " ≫";
		color: #ff5722;
		font-weight: bold;
	}
	.arrow-link {
		text-decoration: none;
		color: #007bff;
	}
</style>

<a href="#" class="arrow-link">詳しくはこちら</a>

ブラウザ表示

詳しくはこちら

5. 文字の下にオシャレな下線（ライン）を引く工夫

普通の下線（アンダーライン）は文字にぴったりくっついてしまいますが、擬似要素を使えば、文字から少し離れた位置に自由な長さの線を引くことができます。これは、最近のトレンドであるミニマルなデザインでよく使われます。

線の太さや色、透明度を自由にコントロールできるため、強調したいメッセージがある時にとても効果的です。背景画像（/img/sample150-100.jpg）などを組み合わせることも可能ですが、まずはシンプルな色線から始めて、CSSの配置ルールである「position（ポジション）」の使い方に慣れていきましょう。


<style>
	/* 文字の下に太いラインを引く */
	.underline-text {
		position: relative;
		display: inline-block;
	}
	.underline-text::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 8px;
		background-color: rgba(255, 193, 7, 0.5);
		z-index: -1; /* 文字の後ろに配置 */
	}
</style>

<span class="underline-text">ここが重要なポイントです！</span>

ブラウザ表示

ここが重要なポイントです！

6. 引用文をカッコよく見せるダブルクォーテーション

他のサイトから文章を引用したときなどに、大きな引用マーク（ダブルクォーテーション）を端っこに配置すると、一気に「引用らしさ」が出ます。これもHTMLに記号を打つのではなく、::beforeでマークを配置し、色やサイズを調整するのがスマートなやり方です。

このように、特定の役割を持つ文章に対して自動で装飾が付くようにしておくと、記事を書くたびにデザインを気にする必要がなくなります。これをテンプレート化と呼び、効率的なサイト運営には欠かせない考え方です。初心者の方は、まずはこの「自動化」の便利さを体験してみてください。

7. 箇条書きのドットを好きな画像や記号に変える

箇条書き（リスト）の先頭にある黒丸「●」を、もっと可愛い星マークやチェックマークに変えたいと思ったことはありませんか？通常の設定では種類が限られていますが、擬似要素を使えば無限のバリエーションが作れます。

既存の黒丸をCSSで消してから、::beforeを使って自分の好きな記号を配置します。Bootstrapのアイコンフォントを読み込んでいれば、電話のマークやメールのマークなども自由自在です。こうした小さなこだわりが、読者にとって読みやすく、記憶に残るブログへと進化させてくれます。SEOのキーワードを盛り込む際も、こうした見やすいリスト構造は検索エンジンに好まれます。

8. 擬似要素がうまく表示されない時のチェックリスト

もしコードを書いても何も表示されない場合は、まずcontentプロパティが書かれているか確認してください。これが抜けているのが一番多い失敗パターンです。次に、display: block;やdisplay: inline-block;が指定されているか見てみましょう。擬似要素は初期状態ではサイズを持たないことが多いため、形を指定してあげる必要があります。

また、スペルミスで「:before（コロン1つ）」になっていないかも確認してください。古い書き方では1つでも動きますが、現在は「::before（コロン2つ）」と書くのが正式なルールです。こうした細かいルールを一つずつクリアしていくことが、プログラミング学習の醍醐味でもあります。焦らずに、ブラウザの表示を確認しながら進めていきましょう。

9. 実践！ボタンに光が流れるようなアニメーション

最後に応用編として、ボタンの上にキラッと光が走るような演出を解説します。これも擬似要素で作った「白い半透明の四角」を、アニメーション（animation）の力で左から右へ動かしているだけなのです。一見難しそうに見える動きも、分解してみれば「擬似要素の移動」に過ぎません。

このように、擬似要素は単なる「静止した飾り」だけでなく、動きのある派手な演出にも使えます。基礎をマスターすれば、あなたのサイトはもっと生き生きと動き出します。まずは本記事のコードをコピーして、色やサイズを変えるところから実験を始めてみてください！


<style>
	/* キラリと光るボタン */
	.shiny-btn {
		position: relative;
		display: inline-block;
		padding: 10px 30px;
		background-color: #28a745;
		color: #fff;
		text-decoration: none;
		overflow: hidden; /* はみ出た光を隠す */
	}
	.shiny-btn::before {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
		transform: skewX(-25deg); /* 斜めにする */
		transition: 0.5s;
	}
	.shiny-btn:hover::before {
		left: 150%; /* マウスをのせると右へ移動 */
	}
</style>

<a href="#" class="shiny-btn">購入はこちら</a>

ブラウザ表示

購入はこちら（マウスをのせてみて！）

2026年最新スキルアップ・実践セミナー