今回は、擬似要素について解説します。
擬似要素とは
擬似要素とは、要素の特定の場所にスタイルを適用させることができるようにするものです。
数はそこそこあるのですが、全て覚える必要はなく、頻繁に使用するものだけを解説します。
::before
選択した要素の子要素の先頭に、擬似要素を生成します。この説明では分かりづらいので、実際の表示を確認していきましょう。
index.htmlを以下のように書き換えてみてください。
<!-- 省略 -->
<body>
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
</body>
<!-- 省略 -->次に、style.cssを以下のように書き換えてください。
.text1::before {
content: '★';
}先頭に★マークが表示されたと思います。
実際の制作では、contentにテキストを入れることよりも、装飾で使うことが多いです。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<ul class="list">
<li class="item">リストアイテム</li>
<li class="item">リストアイテム</li>
<li class="item">リストアイテム</li>
</ul>
</body>
<!-- 省略 -->次に、style.cssを以下のように書き換えてください。
.list {
list-style: none;
padding-left: 0;
}
.item {
display: flex;
align-items: center;
}
.item::before {
content: '';
width: 14px;
height: 14px;
background-color: #000;
margin-right: 5px;
}list-styleは、li要素の先頭に表示されるマーカーを設定するプロパティで、noneを指定するとマーカーがなくなります。
そして、::beforeを使ってli要素に独自の装飾が入るように指定しました。
::after
::afterは、選択した要素の子要素の末尾に、擬似要素を生成します。
index.htmlを以下のように書き換えてみてください。
<!-- 省略 -->
<body>
<p class="text1">テキスト1</p>
<p class="text2">テキスト2</p>
</body>
<!-- 省略 -->次に、style.cssを以下のように書き換えてください。
.text1::after {
content: '♡';
}表示を確認すると、要素の最後に♡マークが入っています。
::first-letter
::first-letterは、最初の行の最初の文字にスタイルを適用させる擬似要素です。
style.cssを以下のように書き換えてください。
.text1::first-letter {
font-size: 30px;
font-weight: 700;
}表示を確認すると、1文字目が大きくなり、太字になっています。
::placeholder
入力フォームで使用するinput要素やtextarea要素では、入力が空の時に指定したテキスト（プレイスホルダー）を表示させることができます。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<input class="input-text" type="text" placeholder="入力してください">
</body>
<!-- 省略 -->表示を確認すると、入力フォームに何も入力していない状態だと「入力してください」という案内が入っています。
style.cssを以下のように書き換えてください。
.input-text::placeholder {
color: #ff0000;
}プレイスホルダーの色が赤になりました。
試しにフォームに文字を打ってみると、その文字は黒いままです。
::placeholderを使うと、プレイスホルダーだけにスタイルを適用させることができます。