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 从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS content 属性示例

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

content 属性使用 none 值

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

示例

Open Compiler
<!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。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,计数将被显示。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况添加到内容中。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,字符串将被插入和显示。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,引号将被插入。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,引号将被插入,但需要注意的是,只有先使用左引号,右引号才会起作用。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,左引号将被移除。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,右引号将被移除。这在以下示例中显示。

示例

Open Compiler
<!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)的使用情况,多媒体将被放置。在以下示例中使用了图像。

示例

Open Compiler
<!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
广告