CSS

CSS pseudo-elements are generated elements that are not actually in the HTML markup, but are created using CSS to finely adjust decoration and expression.

pseudo-element（疑似要素）

　疑似要素は、コンテンツ内に生成された仮想的な要素を指定するための仕組みです。疑似要素は、CSSのセレクタの一種であり、実際には HTML文書内に存在しない要素を指定することができます。

　疑似要素は、コロン（:）を用いて指定されます。疑似要素は、通常、before（要素の前に挿入される）、after（要素の後に挿入される）の 2つがあります。これらは、次のように指定されます。

selector::before {
	/* CSS rules */
}

selector::after {
	/* CSS rules */
}

　例えば、次のような HTML要素がある場合、疑似要素を使用してその要素にアイコンを追加することができます。

<div class="icon-container">
	<span class="icon-content">Some content</span>
</div>

　この場合、CSSを使用して、.icon-container内の .icon-contentの前にアイコンを追加することができます。

.icon-content::before {
	content: url('icon.png');
}

　疑似要素には、contentプロパティを使用してコンテンツを指定することもできます。このプロパティを使用して、テキストや画像、アイコンなどを表示することができます。

selector::before {
	content: 'some text';
}

　疑似要素は、セレクタと同様に、他のプロパティと組み合わせて使用することができます。たとえば、疑似要素に背景色やボーダーを設定することができます。

selector::before {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background-color: red;
	border: 1px solid black;
}

　疑似要素には、:first-letterや :first-lineなど、さまざまな種類があります。これらは、テキスト内の最初の文字や最初の行を指定するために使用されます。

　:first-letter疑似要素を使用すると、テキストの最初の文字にスタイルを適用することができます。たとえば、次のように書くことができます。

p:first-letter {
	font-size: 2em;
	color: red;
}

　この場合、<p>タグ内の最初の文字に、2倍のフォントサイズと赤色の文字色が適用されます。

　:first-line疑似要素を使用すると、テキストの最初の行にスタイルを適用することができます。たとえば、次のように書くことができます。

p:first-line {
	font-weight: bold;
	text-transform: uppercase;
}

　この場合、<p>タグ内の最初の行に、太字のテキストとすべての文字を大文字に変換するスタイルが適用されます。

　疑似要素は、複数のセレクタを組み合わせて使用することもできます。たとえば、.buttonクラスのボタンにアイコンを追加する場合、次のように書くことができます。

.button::before {
	content: url('icon.png');
	margin-right: 10px;
}

.button::after {
	content: 'Click me';
}

　この場合、.buttonクラスのボタンの前にアイコンを表示し、テキストをボタンの後ろに表示します。

　疑似要素には他にも、:beforeと :afterという種類があります。これらは、指定された要素の前や後に内容を挿入することができます。

　:before疑似要素を使用すると、指定された要素の前にコンテンツを挿入することができます。たとえば、次のように書くことができます。

h1::before {
	content: '★';
}

　この場合、<h1>タグの前に、星印が表示されます。

　:after疑似要素を使用すると、指定された要素の後にコンテンツを挿入することができます。たとえば、次のように書くことができます。

p::after {
	content: '...';
}

　この場合、<p>タグの後ろに、ドットが表示されます。

　:beforeと :after疑似要素を使用すると、Webページの装飾やインタラクティブな機能を実現することができます。たとえば、<a>タグの前にアイコンを表示し、クリック時にモーダルを表示するボタンを作成することができます。

.button::before {
	content: url('icon.png');
	margin-right: 10px;
}

.button::after {
	content: 'Learn more';
}

.button:hover::before {
	opacity: 0.8;
}

.button:hover::after {
	text-decoration: underline;
}

.button:active::before {
	opacity: 0.5;
}

.button:active::after {
	transform: scale(0.95);
}

　この場合、.buttonクラスのボタンの前にアイコンを表示し、テキストをボタンの後ろに表示します。また、ボタンの上にマウスを置くと、アイコンの透明度が変化し、テキストに下線が追加されます。クリック時には、アイコンの透明度がさらに下がり、テキストが縮小されます。

　疑似要素を使用する際に注意すべき点について説明します。

contentプロパティを必ず指定する必要があります。

　:beforeや :after疑似要素には、通常の HTML要素とは異なり、コンテンツが存在しません。そのため、必ず contentプロパティを指定する必要があります。contentプロパティには、表示するテキストや画像、空白文字列、空の値（content:'';）を指定することができます。

疑似要素に対してもセレクタを指定できます。

　通常の HTML要素と同様に、疑似要素にもセレクタを指定することができます。例えば、h1::beforeのように、::before疑似要素に対して h1要素を指定することができます。

疑似要素には高さや幅を指定できます。

　疑似要素に対しては、高さや幅を指定することができます。しかし、この場合、疑似要素が表示されるためには、contentプロパティの値を持つ必要があります。例えば、次のように書くことができます。

CSS

h1::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: red;
	margin-right: 10px;
}

　この場合、h1要素の前に20x20ピクセルの赤い四角形が表示されます。

疑似要素には擬似クラスを併用できます。

　疑似要素には、通常の HTML要素と同様に、擬似クラスを併用することができます。例えば、:hoverや :active、:focusなどの擬似クラスを使用することができます。以下は、:hover擬似クラスを併用した例です。

CSS

a::after {
	content: ' (link)';
	font-size: 12px;
	color: gray;
	display: none;
}

a:hover::after {
	display: inline;
}

　この場合、リンクの後ろに (link)というテキストが表示されます。ただし、初期状態では非表示になっており、ホバーすると表示されるようになります。

.arrow::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid black;
	margin-left: 10px;
}

.menu::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 2px;
	background-color: black;
	margin-bottom: 5px;
}

.menu::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 2px;
	background-color: black;
	margin-top: 5px;
}

.box::before {
	content: '';
	display: block;
	position: absolute;
	top: -10px;
	left: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
	border-left: 10px solid white;
	z-index: 1;
}

.box {
	position: relative;
	background-color: white
}

.box::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: black;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease-in-out;
}

.box:hover::before {
	transform: scaleX(1);
}

　疑似要素は、Webデザインや開発において非常に重要な機能の 1つであり、Webページの見た目や動作を自由自在にカスタマイズすることができます。しかし、過剰に使用すると、CSSの複雑性が増し、パフォーマンスやメンテナンス性の問題が発生する可能性があるため、適切な使用方法を学ぶことが重要です。疑似要素にはさまざまな応用技法が存在し、高度な使い方もありますが、まずは基本的な使い方を覚えましょう。