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.tw" 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
列印頁面
上一頁
下一頁
廣告