CSS - content 属性

上一页
下一页

CSS 的 **content** 属性主要与 **::before** 和 **::after** 伪元素结合使用，用于在元素内生成动态内容。它允许在元素内容之前或之后插入文本、图像或其他内容，而无需更改 HTML 结构，它只影响渲染。

语法

content: none | normal | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

属性值

值 描述
none 将内容设置为无。
normal 将内容设置为正常。
counter 将内容设置为计数器。
attr(attribute) 将内容设置为选择器的属性值。
string 将内容设置为指定的文本。
open-quote 将内容设置为左引号。
close-quote 将内容设置为右引号。
no-open-quote 移除内容中的左引号。
no-close-quote 移除内容中的右引号。
url 将内容设置为媒体（例如图像、视频或音频等）。
initial 将属性设置为默认值。
inherit 从父元素继承属性。

CSS content 属性示例

以下示例解释了具有不同值的 **content** 属性。

content 属性使用 none 值

为了防止通过伪元素（::before 或 ::after）向主要内容插入任何额外的内容，我们使用 **none** 值。none 值阻止插入和显示附加内容。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Hello!";
      }

      p#name::before {
         content: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <p> 
      John
   </p>
   <p id="name">
      Ashok Kumar
   </p>

</body>

</html>

content 属性使用 normal 值

当与伪元素（::before 或 ::after）一起使用时，**normal** 值计算结果为 none。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Good Morning!";
      }

      p#name::before {
         content: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <p> 
      Sir
   </p>
   <p id="name">
      Madam
   </p>

</body>

</html>

content 属性使用 counter 值

要显示在编号中很有用的递增值，我们可以使用 **counter**，计数器维护一个计数并使用内容显示相同的计数。根据伪元素（::before 或 ::after）的使用情况，计数将被显示。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         counter-increment: count;
      }

      p::before {
         content: counter(count);
      }
   </style>
</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: counter
   </h4>
   <p> 
      One
   </p>
   <p> 
      Two
   </p>
   <p> 
      Three
   </p>
   <p> 
      Four
   </p>
   <p> 
      Five
   </p>
   <p> 
      Six
   </p>
</body>

</html>

content 属性使用 attribute 值

要显示来自 HTML 元素的指定属性的值，我们使用 **attr(attribute)**。指定的属性值将从 HTML 元素中获取，并根据伪元素（::before 或 ::after）的使用情况添加到内容中。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li::after {
         content: "(" attr(information)")";
      }

      a::before {
         content: attr(href);
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>content: attr(attribute)</h4>
   <ul>
      <li information="This defines the structure of the webpage">
         HTML 
      </li>
      <li information="This styles the webpage">
         CSS 
      </li>
      <li information="This adds functionality to the webpage">
         JAVASCRIPT 
      </li>
   </ul>
   <p>
         You can learn the above here:
         <a href="https://tutorialspoint.com" target=blank> 
         (TutorialsPoint)
         </a>
   </p>

</body>

</html>

content 属性使用字符串

要将字符串插入主要内容，我们可以在 **content** 属性中指定字符串。根据伪元素（::before 或 ::after）的使用情况，字符串将被插入和显示。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: "Welcome to";
      }

      p::after {
         content: "Thank you.";
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: string
   </h4>
   <p> 
      Tutorialspoint! Start learning the technology 
      of your choice with our resources- easy to 
      understand, interactive and interesting. 
   </p>
</body>

</html>

content 属性使用左引号

要将左引号插入主要内容，我们使用 **open-quote** 值。根据伪元素（::before 或 ::after）的使用情况，引号将被插入。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: open-quote;
      }

      p::after {
         content: close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: open-quote
   </h4>
   <p>
      Actions speak louder than words
   </p>
   <p>
      Better late than never
   </p>
</body>

</html>

content 属性使用右引号

要将右引号插入主要内容，我们使用 **close-quote** 值。根据伪元素（::before 或 ::after）的使用情况，引号将被插入，但需要注意的是，只有先使用左引号，右引号才会起作用。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: open-quote;
      }

      p::after {
         content: close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: close-quote
   </h4>
   <p>
      The early worm catches the worm
   </p>
   <p>
      Slow and steady wins the race
   </p>
</body>

</html>

content 属性不使用左引号

要移除插入到内容中的任何指定的左引号，我们使用 **no-open-quote** 值。根据伪元素（::before 或 ::after）的使用情况，左引号将被移除。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: open-quote;
      }

      p::after {
         content: close-quote;
      }

      p.no-open::before {
         content: no-open-quote;
      }

   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: no-open-quote
   </h4>
   <p>
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
   <p class="no-open">
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
</body>

</html>

content 属性不使用右引号

要移除插入到内容中的任何指定的右引号，我们使用 **no-close-quote** 值。根据伪元素（::before 或 ::after）的使用情况，右引号将被移除。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p::before {
         content: open-quote;
      }

      p::after {
         content: close-quote;
      }

      p.no-open::after {
         content: no-close-quote;
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: no-close-quote
   </h4>
   <p>
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
   <p class="no-open">
      TutorialsPoint offers free, comprehensive tutorials
      for various technical subjects online
   </p>
</body>

</html>

content 属性使用 URL

要使用内容显示一些多媒体，例如图像、视频或音频，我们可以指定文件的 url。根据伪元素（::before 或 ::after）的使用情况，多媒体将被放置。在以下示例中使用了图像。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
      }

      p#first::before {
         content: url("/css/images/tutimg.png");
      }

      p#second::after {
         content: url("/css/images/tutimg.png");
      }
   </style>

</head>

<body>
   <h2>
      CSS content property
   </h2>
   <h4>
      content: url()
   </h4>
   <p id="first"> 
      TutorialsPoint
   </p>
   <p id="second">
      TutorialsPoint 
   </p>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
content 1.0 8.0 1.0 1.0 4.0
css_properties_reference.htm
打印页面
上一页
下一页
广告
© . All rights reserved.