CSS1 および CSS2 では、疑似要素の使用は疑似クラスの使用と同じであり、セレクターにコロン:が接続されます。ただし、CSS3 では、疑似クラスと疑似要素を区別するために、疑似要素での単一コロンの使用が二重コロン::に変更されます。したがって、疑似要素を使用する場合は、単一コロンではなく二重コロンを使用することをお勧めします。
selector::pseudo-element {
property: value;
}
このうち、selector はセレクター、pseudo-element は疑似要素の名前、property は CSS でのプロパティ、value はプロパティに対応する値です。
注: セレクター内で使用できる擬似要素は 1 つだけです。擬似要素はセレクターの直後に続く必要があります。最新の W3C 仕様によると、疑似クラスと疑似要素を区別するために、疑似要素を定義するときは、1 つのコロン:の代わりに 2 つのコロン::を使用する必要があります。ただし、古いバージョンの W3C 仕様では特別な区別がなされていなかったため、現在、ほとんどのブラウザは疑似要素を定義するために単一コロンと二重コロンの両方の方法をサポートしています。
次の表に示すように、一連の疑似要素が CSS で提供されます。
| 擬似要素 | 例 | 例の説明 |
|---|---|---|
| ::after | p::after | 各 <p> 要素の後にコンテンツを挿入します |
| ::before | p::before | 各 <p> 要素の前にコンテンツを挿入します |
| ::first-letter | p::first-letter | 各 <p> 要素内のコンテンツの最初の文字と一致します。 |
| ::first-line | p::first-line | 各 <p> 要素のコンテンツの最初の行と一致します。 |
| ::selection | p::selection | ユーザーが選択した要素の部分と一致します |
| ::placeholder | input::placeholder | 各フォーム入力ボックスのプレースホルダー属性と一致します (例: <input>) |
1. ::after
疑似要素 ::after は、指定された要素の後に何らかのコンテンツを挿入できます. ::after では、追加するコンテンツを定義するために content 属性を使用する必要があり、::after では、 content 属性を使用して取得するように定義する必要があります.効果 (挿入されるコンテンツは content 属性の値を空の""として定義できません)。
以下では、例を使用して pseudo-element::after の使用法を示します。
<!DOCTYPE html>
<html>
<head>
<style>
p.one::after {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::after {
content:"挿入するコンテンツ";
color: red;
font-size: 6px;
}
p.three::after {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">疑似要素 ::after</p>
<p class="two">疑似要素 ::after</p>
<p class="three">疑似要素 ::after</p>
</body>
</html> 実行結果は次の図のとおりです。
2. ::before
pseudo-element::before は、指定された要素の前にコンテンツを挿入します。 ::after と同様に、::before も content 属性を使用して追加するコンテンツを定義する必要があり、コンテンツ属性を ::before で定義して有効にする必要があります (挿入するコンテンツがない場合、値content 属性のは空の""として定義できます)。
以下では、例を使用して pseudo-element::before の使用法を示します。
<!DOCTYPE html>
<html>
<head>
<style>
p.ichi::before {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.ni::before {
content:"要挿入する内容";
color: red;
font-size: 6px;
}
p.san::before {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="ichi">疑似要素 ::before</p>
<p class="ni">疑似要素 ::before</p>
<p class="san">疑似要素 ::before</p>
</body>
</html> 実行結果は次の図のとおりです。
3.::first-letter
pseudo-element::first-letter は、指定された要素のコンテンツの最初の文字のスタイルを設定するために使用され、通常は font-size および float 属性と組み合わせて使用され、ドロップ キャップ効果を作成します。疑似要素::最初の文字はブロック レベルの要素にのみ使用できることに注意してください. インライン要素がこの疑似要素を使用する場合は、最初にブロック レベルの要素に変換する必要があります.
次の例は、 pseudo-element::first-letter の使用を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter{
font-size: 2em;
color: blue;
}
</style>
</head>
<body>
<p>擬似要素 ::first-letter</p>
</body>
</html>
実行結果は次の図のとおりです。
4. ::first-line
擬似要素 ::first-line は、指定された要素のコンテンツの最初の行のスタイルを設定するために使用されます. ::first-letter と同様に、擬似要素 ::first-line は block-レベル要素. インライン要素はこの疑似要素を使用したいので、最初にそれらをブロックレベル要素に変換する必要があります.
次の例は、pseudo-element::first-line の使用を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line{
font-size: 1.5em;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>要素 ::first-line は、指定された要素内の最初の一行のスタイルを設定するために使用されます。 ::first-letter と同様に、伪要素 ::first-line はブロック要素にのみ使用できます。インライン要素を使用する場合は、まずブロック要素に変換する必要があります。</p>
</body>
</html>
実行結果は次の図のとおりです。
5.::selection
疑似要素::selectionは、オブジェクトが選択されたときにスタイルを設定するために使用されます. 要素が選択されている場合、疑似要素::選択は色、背景、カーソル、アウトライン、およびテキストシャドウのみを定義できることに注意してください.選択された (IE11 はこのプロパティの定義をまだサポートしていません) およびその他のプロパティ。
次の例は、疑似要素::選択の使用を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
.selected-text::selection{
color: red;
background-color: #CCC;
}
</style>
</head>
<body>
<p>要素 ::selection は、オブジェクトが選択された時に適用されるスタイルを設定するために使用されます。ただし、要素 ::selection 中では、color、background、cursor、outline およびtext-shadow （IE11 では定義できない）などの属性を定義することができます。</p>
</body>
</html> 実行結果は次の図のとおりです。
フォーム要素（<input>、<textarea>要素）のプレースホルダーテキスト（HTMLのプレースホルダー属性で設定されたテキスト）を設定するには、疑似要素::プレースホルダーを使用します。サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
input.search::placeholder{
color: red;
background-color: #CCC;
}
</style>
</head>
<body>
<input placeholder="テキストを入力してください">疑似要素 ::placeholder が使用されていません<br>
<input placeholder="テキストを入力してください" class="search">疑似要素 ::placeholder を使用した効果
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
