CSS擬似要素は、HTMLドキュメント内の特定部分に対して特別なスタイルを適用するための仕組みです。疑似クラス（単一のコロン:で記述）とは異なり、擬似要素は二重コロン::で始まります。これにより、HTML構造を変更することなく、装飾やコンテンツの追加が可能になります。
主な擬似要素の一覧
- ::before - 要素の内容の前にコンテンツを挿入
- ::after - 要素の内容の後にコンテンツを挿入
- ::first-letter - 要素内の最初の文字を選択
- ::first-line - 要素内の最初の行を選択
- ::selection - ユーザーが選択したテキスト部分のスタイルを変更
::beforeと::afterの基本
::beforeと::afterは、要素の前後にコンテンツを生成する際に使用します。これらを使用するには、contentプロパティが必須です。
.quote-text::before {
content: "「";
color: #666;
}
.quote-text::after {
content: "」";
color: #666;
}この例では、引用符をテキストの前後に自動的に追加しています。
::first-letterでドロップキャップ効果
::first-letterを使用すると、段落の最初の文字に特別なスタイルを適用できます。ブロックレベル要素にのみ適用可能です。
.drop-cap::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 0.1em;
color: #2c3e50;
font-weight: bold;
}適用可能なプロパティには、フォント関連、色、背景、マージン、パディング、ボーダー、text-decoration、vertical-align、text-transform、line-height、float、clearなどがあります。
::first-lineで行単位のスタイリング
::first-lineは、テキストの最初の行にスタイルを適用します。ウィンドウ幅によって選択される範囲が動的に変化する点が特徴です。
.headline::first-line {
font-weight: bold;
color: #e74c3c;
font-variant: small-caps;
}ブロックレベル要素にのみ適用可能で、使用できるプロパティはフォント、色、背景、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clearです。
::selectionで選択テキストの装飾
::selectionは、ユーザーがマウスでドラッグして選択したテキスト部分にスタイルを適用します。
::selection {
background-color: #3498db;
color: #ffffff;
}
::-moz-selection {
background-color: #3498db;
color: #ffffff;
}Firefox対応のため::-moz-selectionも記述する必要があります。適用可能なプロパティは、color、background、cursor、outlineのみです。
CSSクラスとの組み合わせ
擬似要素は特定のクラスを持つ要素に対して適用することも可能です。
.highlight::first-letter {
font-size: 200%;
color: #c0392b;
}複数の擬似要素の併用
::first-letterと::first-lineは同時に適用できます。最初の文字には::first-letterのスタイルが優先されます。
.story::first-letter {
font-size: 2.5em;
color: #8e44ad;
float: left;
}
.story::first-line {
font-weight: bold;
color: #2980b9;
}実践例：装飾的なリストの作成
以下は、チケット風のデザインを持つリストを作成する例です。::beforeと::afterを活用して、切り取り線のような装飾を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Pseudo Elements Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.ticket-container {
max-width: 500px;
margin: 0 auto;
}
.ticket-item {
background: #ffffff;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 20px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ticket-item::before,
.ticket-item::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #667eea;
border-radius: 50%;
}
.ticket-item::before {
left: -10px;
top: 50%;
transform: translateY(-50%);
}
.ticket-item::after {
right: -10px;
top: 50%;
transform: translateY(-50%);
}
.ticket-number {
font-size: 0.85em;
color: #7f8c8d;
margin-bottom: 8px;
}
.ticket-title {
font-size: 1.2em;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.ticket-desc {
font-size: 0.9em;
color: #7f8c8d;
}
.ticket-divider {
border: none;
border-top: 2px dashed #bdc3c7;
margin: 15px 0;
}
.ticket-item:nth-child(1)::before,
.ticket-item:nth-child(1)::after {
background: #e74c3c;
}
.ticket-item:nth-child(2)::before,
.ticket-item:nth-child(2)::after {
background: #27ae60;
}
.ticket-item:nth-child(3)::before,
.ticket-item:nth-child(3)::after {
background: #f39c12;
}
</style>
</head>
<body>
<div class="ticket-container">
<div class="ticket-item">
<div class="ticket-number">No. 001</div>
<div class="ticket-title">フロントエンド開発入門</div>
<hr class="ticket-divider">
<div class="ticket-desc">HTML/CSS/JavaScriptの基礎を学ぶ</div>
</div>
<div class="ticket-item">
<div class="ticket-number">No. 002</div>
<div class="ticket-title">レスポンシブデザイン実践</div>
<hr class="ticket-divider">
<div class="ticket-desc">モバイルファーストな設計手法</div>
</div>
<div class="ticket-item">
<div class="ticket-number">No. 003</div>
<div class="ticket-title">CSSアニメーション</div>
<hr class="ticket-divider">
<div class="ticket-desc">トランジションとキーフレームの活用</div>
</div>
</div>
</body>
</html>このサンプルでは、各チケット項目の左右に円形の装飾を::beforeと::afterで配置しています。contentプロパティは空文字を指定し、形状のみを表示させています。:nth-child()セレクタと組み合わせることで、各項目ごとに異なる色を適用しています。
ブラウザ対応について
主要なモダンブラウザはすべて擬似要素をサポートしています。CSS3以降、擬似要素は二重コロン::で記述することが推奨されていますが、CSS1およびCSS2との後方互換性のため、:beforeや:afterのような単一コロン記法も引き続き機能します。ただし、新しいプロジェクトでは二重コロン記法を使用することが推奨されます。