カテゴリー
content CSS

【CSS】content:コンテンツを挿入する

(例)【CSS】contentの使用方法

See the Pen
content
by linlin (@linlin098765)
on CodePen.

<p class="sample1">先頭にテキストを挿入</p>
<p class="sample2">末尾に画像を挿入</p>
p.sample1:before {content: "'例':" }
p.sample2:after {content: url("https://www.llc-linlin.com/picture/SEO.jpg") }

【CSS】content:コンテンツを挿入する

 CSSのcontentは、要素の直前または直後にコンテンツ(テキストまたは画像)を挿入するプロパティです。contentプロパティを適用できるのは、擬似要素の:beforeと:afterのみです。

  • テキスト
    文字列の挿入
  • 画像等のファイル
    URLでファイルを指定して挿入
  • attr()
    ()内に属性を指定しcontentプロパティとして追加
  • open-quote,close-quote
    quoteプロパティで指定した引用符を挿入。open-quoteが開始引用符、close-quoteだと終了引用符が挿入
  • no-open-quote,no-close-quote
    引用符は表示されない。quotesプロパティで指定した引用符の深さが一階階前後する。no-open-quoteを指定すると一階階深くなり、no-close-quoteを指定すると一階階浅くなる。