【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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト