詳解逆引きHTML+CSS辞典

その他 - CSSで要素内容を追加したい

登録タグ
Icon comment count 0
Icon stock count 0

CSSで要素内容を追加したい

テキストや画像をCSSで追加したい

contentプロパティ

CSSのcontentプロパティを使用すると、特定の要素の要素内容としてテキストや画像を追加することができます。contentプロパティは必ずセレクタの:beforeまたは:afterとセットで使用し、:beforeを使用した場合は要素内容の先頭に、:afterを使用した場合は要素内容の末尾にテキストや画像を挿入します。

追加するテキストや画像は、contentプロパティの値として指定します。画像を指定する際は、背景画像を指定するときと同じように「url( )」という書式の( )内に画像のURLを書き入れます。値は半角スペースで区切って複数指定できます。

次の例では、「透明度の設定が可能。」というテキストの直前に手の形の画像を挿入し、テキストの直後に「※CSS3」というテキストを挿入しています。疑似要素のセレクタである:beforeと:afterは、必ずセレクタ全体の最後につける必要がある点に注意してください。

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません