HTML & CSS

最終更新日：
公開日：

基礎

CSS

CSSで設定できる擬似要素

「::before」や「::after」など、CSSで扱うことのできる擬似要素についてコード例を交えながら解説します。

この記事のポイント

  • CSSで使用できる擬似要素の種類が分かる
  • コード例から具体的な使用方法を確認する

目次

CSSで扱うことのできる擬似要素

CSSでは次の4種類の擬似要素が定義されています。

擬似要素対象
::before要素の先頭
::after要素の末尾
::first-line要素の1行目
::first-letter要素の1文字目

CSSのコードを使いながら、１つずつ解説していきます。

要素の先頭を指す「::before」と、末尾を指す「::after」

「::before」と「::after」は要素の開始と末尾を示す、対となる擬似要素です。
まずはリストに「::before」を使ってアイコンのような丸を作ってみます。。

コード例

<style>
ul {
	list-style-type: none;
}
ul li {
	margin-bottom: 5px;
	line-height: 1.4em;
}
ul li::before {
	display: inline-block;
	content: "";
	margin-top: 6px;
	margin-right: 7px;
	width: 10px;
	height: 10px;
	vertical-align: top;
	border-radius: 5px;
	background-color: #0062b5;
}
ul li:last-child {
	margin-bottom: 0;
}
</style>
<section>
	<ul>
		<li>リストの項目1</li>
		<li>リストの項目2</li>
		<li>リストの項目3</li>
		<li>リストの項目4</li>
		<li>リストの項目5</li>
	</ul>
</section>
表示例

続いて、擬似要素「::after」を追加します。

コード例

<style>
ul {
	list-style-type: none;
}
ul li {
	margin-bottom: 5px;
	line-height: 1.4em;
}
ul li::before {
	display: inline-block;
	content: "";
	margin-top: 6px;
	margin-right: 7px;
	width: 10px;
	height: 10px;
	vertical-align: top;
	border-radius: 5px;
	background-color: #0062b5;
}
ul li::after {
	display: inline-block;
	content: "";
	margin-top: 4px;
	margin-left: 7px;
	vertical-align: top;
	border-top: 7px solid #f7f7f7;
	border-bottom: 7px solid #f7f7f7;
	border-right: 6px solid #f7f7f7;
	border-left: 6px solid #0062b5;
}
ul li:last-child {
	margin-bottom: 0;
}
</style>
<section>
	<ul>
		<li>リストの項目1</li>
		<li>リストの項目2</li>
		<li>リストの項目3</li>
		<li>リストの項目4</li>
		<li>リストの項目5</li>
	</ul>
</section>
「::after」を追加した表示例

擬似要素には背景画像を使って画像アイコンにしたり、テキストの前後に「“」をつけて引用文を作ったりなど、様々な使い方ができます。
また、HTMLを直接記述する必要がなく、CSSのみで表現できるところがポイントです。

Note

CSSは擬似要素とよく似た擬似クラスというものが定義されています。
擬似要素は「::before」のように頭に「: (コロン)」が2つ付きますが、擬似クラスは「:last-child」と1つだけになります。

テキストの先頭1行目を指す「::first-line」

擬似要素「::first-line」を使うと、テキストの先頭1行目のみにスタイルを適用することができます。

コード例

<style>
p {
	color: #333;
	line-height: 1.6em;
}
p::first-line {
	color: #0068c0;
	font-size: 115%;
}
</style>
<section>
	<p>サンプルテキストです。<br>1行目のみスタイルを当てたいときは擬似要素「::first-line」を使い、1文字目のみにスタイルを当てたいときは「::first-letter」を使います。</p>
</section>
「::first-line」を適用した表示例

今回はp要素を使っていますが、h1要素などの見出しやリストなどブロックレベル要素で使用できます。

なお、使用できるCSSプロパティには制限があります。
詳しくは次のページの「利用可能なプロパティ」欄を参照してください。
::first-line – MDN web docs

テキストの先頭1文字目を指す「::first-letter」

先頭の1文字だけにCSSを適用したい時は、擬似要素「::first-letter」を使います。

コード例

<style>
p {
	color: #333;
	line-height: 1.6em;
}
p::first-letter {
	color: #ff2458;
	font-size: 129%;
	font-weight: bold;
}
</style>
<section>
	<p>サンプルテキストです。<br>1行目のみスタイルを当てたいときは擬似要素「::first-line」を使い、1文字目のみにスタイルを当てたいときは「::first-letter」を使います。</p>
</section>
「::first-letter」を適用した表示例

こちらも「::first-line」同様にブロックレベル要素で使用できます。

前のページへ 一覧に戻る 次のページへ