CSSの擬似要素、BeforeとAfterの使い方

擬似要素、BeforeとAfterとは？

CSSの::beforeと::afterの違いについて説明します。これらは疑似要素（pseudo-elements）と呼ばれ、HTMLの要素に追加のコンテンツを挿入するために使用されます。

主な違いは以下の通りです：

1. 挿入位置:

• ::before: 選択した要素の内容の前に挿入されます。
• ::after: 選択した要素の内容の後に挿入されます。

1. 使用目的:

• ::before: 要素の前に装飾や追加情報を付け加えるのに使用されます。
• ::after: 要素の後に装飾や追加情報を付け加えるのに使用されます。

1. CSSでの記述順:

• ::before: 通常、要素のスタイル定義の最初に記述されます。
• ::after: 通常、要素のスタイル定義の最後に記述されます。

以下は具体的な使用例です。

 html


<div style="font-family: Arial,sans-serif; max-width: 600px; margin: 0 auto;">
    <style>
        .sample{
            background-color: #f6fcf6;
            padding: 20px;
            margin: 20px 0;
            position: relative;
        }
        .before-text::before{
            content: "Before";
            color: red;
            font-weight: bold;
        }
        .after-text::after{
            content: "After";
            color: blue;
            font-weight: bold;
        }
        .combined-text::after{
          content: "⭐️";
          color: gold;
        }
        .combined-text::before{
            content: "⭐️";
            color: gold;
        }
    </style>

    <div class="sample before-text">
        ::beforeの例
    </div>

    <div class="sample after-text">
        ::afterの例
    </div>

    <div class="sample combined-text">
        ::beforeと::afterの組み合わせ
    </div>
 </div>

この例で示したように、::beforeと::afterを使用することで、HTMLの構造を変更せずに要素の前後に追加のコンテンツを挿入できます。

使用時の注意点：

• content属性は必須です。空の文字列 (“”) でも設定する必要があります。
• これらの疑似要素はインライン要素として扱われますが、displayプロパティで変更可能です。
• JavaScriptからは直接操作できません（CSSを通じて間接的に操作可能）。

リボン付きカードとリストアイテムの前に絵文字を追加

html

<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<style>
    .sample{
        margin: 40px 0;
        padding: 30px;
        background-color: aliceblue;
        border-radius: 5px;
    }
    /*リボン付きカード*/
    .ribbon-card{
        position: relative;
        background: white;
        padding: 20px;
        margin-top: 30px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);

    }
    .ribbon-card::before{
        content: "NEW";
        position: absolute;
        top: -10px;
        left: -10px;
        background: red;
        color: white;
        padding: 5px 10px;
        transform: rotate(-45deg);
        font-size: 12px;
    }
    /*リスト*/
    .item-list{
        list-style-type: none;
        padding: 0;
        margin-top: 30px;
    }
    .item-list li{
        padding-left: 30px;
        position: relative;
        margin-bottom: 10px;
    }
    .item-list li::before{
        content:"🚀";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class="sample">
    <h3>リボン付きカード</h3>
    <div class="ribbon-card">
        これは新着のカードコンテンツです。
    </div>
</div>

<div class="sample">
    <h3>リスト</h3>
    <ul class="item-list">
        <li>最初のアイテム</li>
        <li>2番目のアイテム</li>
        <li>３番目のアイテム</li>
    </ul>
</div>
</div>

まとめ

::beforeと::afterを適切に使用することで、HTMLをクリーンに保ちながら、視覚的に豊かなデザインを実現できます。