ZeroPlus Media > L_HTML/CSS > Step2 > CSSの擬似要素で擬似的に要素を追加しよう

CSSの擬似要素で擬似的に要素を追加しよう

2022/07/14

2022/08/24

Web制作で必ず使用する擬似要素について解説していきます。

擬似要素の使い方を理解することで、CSSでのスタイリング（装飾）する表現の幅が広がるので必ずマスターできるようにしていきましょう！

この記事で身につく内容

擬似要素とは

擬似要素を一言で表すと「CSSのみで、指定した要素に装飾が行えるモノ」です。

デモを見てみましょう。

擬似要素を使わない場合

HTMLに着目してください。

擬似要素を使わない場合、装飾をするには.title-lv2-decoや.desc-decoのようにspanタグを作成して、HTMLを書き加える必要があります。

それを踏まえて、次に擬似要素を使った場合をみてみましょう。

擬似要素を使った場合

擬似要素を使うと、デモのように構造的な意味を持っている、必要最小限のHTMLのみで装飾をつけることができます。

HTMLは本来、コンテンツの構造を作るための言語ですので、装飾用のタグは最小限が望ましいです。そんな時に使えるのが今回扱う「擬似要素」です。

擬似要素にはいくつかの種類がありますが、今回は中でもまずは押さえておきたい次の2つから紹介いたします。

擬似要素	できること
::before	指定した要素の最初の子要素として、擬似要素を作れます
::after	指定した要素の最後の子要素として、擬似要素を作れます

指定した要素の子要素として擬似要素を作れます。

次のように記述すると、擬似要素を作ることができます。

.selector::before {
 content: '';
 /* その他、擬似要素に適応させたいスタイルを記述 */
}

.selector::after {
 content: '';
 /* その他、擬似要素に適応させたいスタイルを記述 */
}

content: ' ' ;がないと、擬似要素として作られないので注意しましょう。
作成したい擬似要素に文字を含まない場合は空で問題ありません。

また、::beforeと ::afterには主に、「そのまま配置する方法」と「positionプロパティを用いる方法」の２種類の使い方があります。

それぞれ見ていきます。

そのまま配置する方法

指定した要素の子要素として、::beforeが最初、::afterが最後に生成されるので、このデモでは「HTMLにある要素本体」という文字をはさむ形で作られています。

positionプロパティを用いる方法

最初は【そのまま配置する方法】と同じ位置に作られるのですが、positionを使うことで自由に置くことができます。

装飾として::before, ::afterを使う場合は、こちらの使い方をする方が多いです。

１つの要素に対して、::beforeと::afterそれぞれ１つずつしか指定ができないので、注意が必要です。

最もよく使用するのは::beforeと::afterですが、今回はそのほかにも2種類紹介したいと思います。

擬似要素	できること
::first-line	指定した要素の最初の行に、限定的にスタイルを当てることができます
::first-letter	指定した要素の最初の文字に、限定的にスタイルを当てることができます