基礎

CSSで設定できる擬似要素

  • このエントリーをはてなブックマークに追加

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

この記事のポイント

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

目次

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

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

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

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

要素の先頭を指す「::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」を追加した表示例
「::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」を適用した表示例
「::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-letter」を適用した表示例

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

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ