CSSで設定できる擬似要素

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

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

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>

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

テキストの先頭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>

今回は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-line」同様にブロックレベル要素で使用できます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。