CSS-コンテンツ

説明

_content_プロパティは、生成されたコンテンツ操作に挿入されるコンテンツを定義します。このプロパティは、：beforeまたは：after擬似要素とともに使用されます。

可能な値

string -許可される文字列値。これは常に引用符で囲まれます。
URI -画像などの外部リソースへのポインタ。
counter -この値には、counter（name、style？）とcounters（name、string ,? スタイル？）。どちらの場合も、コンテンツはドキュメント内のその時点での名前付きカウンターの値であり、オプションのスタイル値（デフォルトでは10進数）でレンダリングされます。 counters（…）の場合、オプションの文字列値は、名前付きカウンターの各インスタンスの後に続く文字列を示します。
* attr（X）*-セレクターのサブジェクトに属性Xの値を挿入します。たとえば、この値を使用して、画像のalt属性の値を表示できます。
open-quote -プロパティの引用符を使用して指定された適切な文字列を挿入します。
close-quote -プロパティの引用符を使用して指定された適切な文字列を挿入します。
no-open-quote -プロパティの引用符を使用して指定された適切な文字列の挿入を防ぎます。ただし、引用符のネストレベルは引き続き増加します。
no-close-quote -プロパティの引用符を使用して指定された適切な文字列の挿入を防ぎます。ただし、引用符のネストレベルは依然として低下しています。

に適用されます

before and :after pseudo-elements.

DOM構文

object.style.content = "url(home.avi)"

例

以下は、_：before_要素を使用して、要素の前にコンテンツを追加する方法を示す例です。

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

これは、次の黒いリンクを生成します-

以下は、_：after_要素を使用して、任意の要素の後にコンテンツを追加する方法を示す例です。

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

これは、次の黒いリンクを生成します-

Css-content

目次

CSS-コンテンツ

説明

可能な値

に適用されます

DOM構文

例