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

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

Categories > CSSのセレクター編

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

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

「::before」って何？？

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

この記事の内容！

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

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

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

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

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

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

ふむふむ。

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

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

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

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

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

擬似要素の「::before」の使い方

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

p::before {
    content: "✔ ";
}

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

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

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

なるほどね！

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

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

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

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

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

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

メモメモ。

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

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

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

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

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

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

ブログの「リンクカード」の左上に「new」と表示する

<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::before {
    content: "new";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    padding: 4px;
    font-size: 14px;
}

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

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

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