CSS 便利な疑似要素の使い方について

2024年1月2日2024年7月30日

今回は要素に対して装飾を行いたい場合にとても便利な疑似要素について解説いたします。

疑似要素という言葉を聞いたことがない方や、言葉は知ってるけどいまいち使い方がわからないといった方はぜひ読んでいただけると幸いです。

疑似要素とは

疑似要素とはCSSの記載で、あたかもHTML要素があるようなふるまいを持たせるCSSの記述方法です。

疑似クラスと呼ばれるものがありますが、これはまた別物で疑似要素が使用できると、HTML要素を記載しなくてもちょっとした装飾ができるなど便利なことがたくさんあります。

HTML要素を記載して、CSSのプロパティを記載しても同様のことは可能ですが、HTMLのコード量が増えてしまうため、可能であれば疑似要素を使いこなしていきたいですね！

疑似要素の使用方法につきましては以下をご覧いただけますと幸いです。

疑似要素の書き方について

疑似要素は主に２つ存在し、beforeとafterがあります。

※厳密にいえばほかにもありますが、頻繁に使用するためこちらの2つをご紹介いたします。

before

<p class="text">疑似要素の書き方</p>

<style>
  .text {
    color: #555;
    font-size: 24px;
  }
  .text::before {
    content: '★';
  }
</style>

セレクタに対して::beforeの指定を行います。contentプロパティは必須となっており、値はシングルクォーテーションで囲む必要があります。

上記の場合は先頭に★を入れております。

検証ツールで見ると、ピンクの文字で::beforeが表示されていることがわかります。

CSSの指定ではコロン「:」を２つ付けて記述します。「::before」
現在のCSS3のバージョンでは２つ付けることが推奨されており、以前のバージョン（CSS2）ではコロンは１つでした。
コロンが１つだと疑似クラスと見分けが付きにくくなってしまうため、疑似要素を記載する際にはコロンは２つ記載するようにしましょう！

after

<p class="text">疑似要素の書き方</p>

<style>
  .text {
    color: #555;
    font-size: 24px;
  }
  .text::after {
    content: '★';

    color: red;
  }
</style>

セレクタに対して::afterの指定を行います。beforeと同様にcontentプロパティは必須となります。

afterの場合は後ろに要素が追加されます。

検証ツールで見ると、ピンクの文字で::afterが表示されていることがわかります。

疑似要素を装飾として使用するケース

上記の例では文字をcontentプロパティの値で記載し、表示しておりましたが、値をあえていれないようにすることも可能です。

以下の例をご覧ください。

<style>
  .text {
    color: #555;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .text::after {
    content: '';
    display: block;
    width: 2px;
    height: 24px;
    background-color: #555;
    margin: .5em auto;
  }
</style>