content

优质

小牛编辑

122浏览

2023-12-01

描述 (Description)

content属性定义要在生成的内容操作中插入的内容。此属性与以下内容一起使用:before或:after伪元素。

可能的值 (Possible Values)

string - 任何允许的字符串值。它始终用引号括起来。
URI - 指向外部资源（如图像）的指针。
counter - 这个值有两种可能的形式:counter（name，style？）和counter（name，string，？style？）。在这两种情况下，内容都将是文档中该点的指定计数器的值，以可选样式值（默认为十进制）呈现。在计数器（...）的情况下，可选的字符串值表示跟随指定计数器的每个实例的字符串。
attr(X) - 为选择器的主题插入属性X的值。例如，可以使用此值显示图像的alt属性的值。
open-quote - 使用属性引号插入指定的相应字符串。
close-quote - 使用属性引号插入指定的相应字符串。
no-open-quote - 禁止插入使用属性引号指定的相应字符串。但是，引号的嵌套级别仍然增加。
no-close-quote - 禁止插入使用属性引号指定的相应字符串。但是，引号的嵌套级别仍然会降低。

适用于 (Applies to)

:before和:after伪元素。

DOM语法 (DOM Syntax)

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

例子 (Example)

以下是演示如何使用: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元素: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>

这将产生以下黑色链接 -