2024/05/07 (更新日:2024/07/11)

【CSS】擬似要素の「::after」の使い方！【分かりやすい】

Categories > CSSのセレクター編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似要素の「::after」の使い方について解説します。

「::after」って何？？

このような方が対象です。

この記事の内容！

擬似要素の「::after」を使うと何ができるのか？
擬似要素の「::after」の使い方

また、下の動画でも擬似要素の「::after」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

擬似要素の「::after」を使うと何ができるのか？

擬似要素の「::after」を使うと、選択した要素の最後の子要素に「擬似的な要素」を追加することができます。

簡単なテキストなどを追加することができるので便利です。

ふむふむ。

擬似要素の基本的な使い方について！

「擬似要素の基本的な使い方」については下記の記事で丁寧に解説しています。もし「擬似要素の基本的な使い方」について知りたい方は下記の記事をお読みください！

【CSS】「擬似要素」とは何か？基本的な使い方を丁寧に解説！【分かりやすい】

それでは擬似要素の「::after」の使い方について解説していきますね！

「content」プロパティでコンテンツを表示する

<p>てきすとです</p>
<p>てきすとです</p>
<p>てきすとです</p>

p::after {
    content: "！";
}

「content」プロパティを使うことで、擬似要素の「::after」を使って作った擬似的な要素の中に、テキストや記号などのコンテンツを表示することができます。

使い方はシンプルで、「””」ダブルクォーテーションマークでコンテンツを囲んで指定すればOKです！

上の例では、「content」プロパティに「”！”」と指定しているので、「::after」で作った擬似的な要素の中にそれぞれ「！」が追加されていますね。

なるほどね！

「content」プロパティの指定が必須！

<p>てきすと</p>
<p>てきすと</p>
<p>てきすと</p>

p::before {
    content: "！ ";　これ必須！！
}

擬似要素の「::after」を使うのならCSSの「content」プロパティの指定は必須です。

「content」プロパティを使うことで「擬似要素」が現れます。

たとえ「width」や「height」や「background-color」の指定をしていたとしても、「content」の指定がなければ「擬似要素」は表示されないので注意が必要ですね。

メモメモ。

特に指定がなければ「display: inline」となる

p::after{
    content: "";
    display: inline-block;　これが必要！
    width: 100px;
    height: 100px;
    background-color: pink;
}

「::after」で作った擬似的な要素は、特に指定がなければ「display: inline」となります。

「記号」や「簡単なテキスト」などを表示したい場合はあまり意識しなくてもOKですが、幅と高さを持たせたい場合は、「display」プロパティの値を変更する必要があります！

擬似要素の「::after」の簡単な使用例！

擬似要素の「::after」の簡単な使用例についても書いておきますね！

ブログの「リンクカード」の右上に「重要」と表示する

擬似要素の「::after」の簡単な使用例

<article>
    <a href="">記事のタイトル</a>
</article>

<article>
    <a href="">記事のタイトル</a>
</article>

<article>
    <a href="">記事のタイトル</a>
</article>

a {
    all: unset;
}

article {
    border: 3px solid #333;
    width: 300px;
    padding: 30px;
    margin-bottom: 20px;
    position: relative;
}

article::after {
    content: "重要";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: pink;
    padding: 10px;
    border-radius: 50%;
    font-size: 14px;
}

ブログなどで記事のリンクを表す「サムネイル」と「タイトル」からなるようなリンクのことを「リンクカード」と呼んだりします。

このブログでも使っていますね！

このリンクカードの右上に「重要」という文字を表示したい場合に擬似要素の「::after」を使ったりします。