CSS :after、:befor を使って前後に文字を追加する

CSS では「:after 疑似要素」や「:before 疑似要素」に対して、 content プロパティを使用することでコンテンツの前後に文字等を追加することができます。

:after」で要素内容のに、 「:befere」で要素内容のに文字等を追加します。 追加するテキストは引用符で囲って指定します。

使用例


span:before {
    content: "★";
}

上の例では、span 要素内容の前に「★」マークを追加します。

contents プロパティのサンプル

下のサンプルでは、span 要素内容の前に「★」マークを追加し、 span 要素内容の後に「!!」マークを追加しています。


<span class="sample">サンプルコンテンツ1</span>
<span class="sample">サンプルコンテンツ2</span>
<span class="sample">サンプルコンテンツ3</span>


<style>
    span.sample {
        display: block;
    }
    /* 後 after */
    span.sample:after {
        content: "!!";
    } 
    /* 前 before */
    span.sample:before {
        content: "★";
    }
</style>

表示結果: 指定したテキストが前後に追加されています。

サンプルコンテンツ1 サンプルコンテンツ2 サンプルコンテンツ3

HTML・CSS入門