8.1 疑似要素の種類
CSSの疑似要素は、最初の文字や最初の行など、要素の特定の部分をスタイル設定することを可能にし、要素の前後にコンテンツを追加することもできます。これにより、HTML構造を変更せずにスタイル設定の可能性が広がります。疑似要素はコロン2つ(::)で示されます。
主な疑似要素:
::before::after::first-letter::first-line
8.2 疑似要素::before
疑似要素::beforeは、要素のコンテンツの前にコンテンツを追加します。装飾要素やアイコン、追加のテキストを追加するのによく使われます。
構文例:
セレクタ::before {
content: "" | "テキスト" | url() | counter | attr();
プロパティ: 値;
}
contentフィールドには追加するhtmlコードを指定します。
CSS
/* リストの各要素の前に矢印を追加 */
li::before {
content: "→ ";
color: red;
}
HTML
<ul>
<li>最初のリスト要素</li>
<li>二番目のリスト要素</li>
<li>三番目のリスト要素</li>
</ul>
8.3 疑似要素::after
疑似要素::afterは、要素のコンテンツの後にコンテンツを追加します。装飾要素やアイコン、追加のテキストを追加するのによく使われます。
構文例:
セレクタ::after {
content: "" | "テキスト" | url() | counter | attr();
プロパティ: 値;
}
contentフィールドには追加するhtmlコードを指定します。
CSS
/* リストの各要素の後にドットを追加 */
li::after {
content: " •";
color: blue;
}
HTML
<ul>
<li>最初のリスト要素</li>
<li>二番目のリスト要素</li>
<li>三番目のリスト要素</li>
</ul>
8.4 疑似要素::first-letter
疑似要素::first-letterは要素の最初の文字に適用されます。段落の飾り文字の作成によく使われます。
構文例:
セレクタ::first-letter {
content: "" | "テキスト" | url() | counter | attr();
プロパティ: 値;
}
例:
CSS
/* 各段落の最初の文字を拡大し、色を変更 */
p::first-letter {
font-size: 2em;
color: green;
}
HTML
<p>これは段落内のテキスト例です。</p>
<p>もう一つの段落内のテキスト例です。</p>
8.5 疑似要素::first-line
疑似要素::first-lineは要素の最初の行に適用されます。段落の最初の行をスタイル設定するのによく使われます。
構文例:
セレクタ::first-line {
content: "" | "テキスト" | url() | counter | attr();
プロパティ: 値;
}
例:
CSS
/* 各段落の最初の行を太字にして色を変更 */
p::first-line {
color: navy;
font-weight: bold;
}
HTML
<p>
これは段落内のテキスト例であり、十分なテキストを含むことで複数行に分かれ、疑似要素::first-lineの機能を示しています。各段落の最初の行は太字と紺色で強調され、読者の注意を引きます。この効果は、先に定義したCSSルールを使用して達成されます。
</p>
<p>
長さに関係なく、スタイル設定は最初の行にのみ適用されます。段落内の他のテキストは元のスタイルを保持します。これは重要なポイントを強調したり、テキストに視覚的なリズムを作るのに役立ちます。
</p>
GO TO FULL VERSION