CSS content property

2025年3月26日 | 阅读 4 分钟

此 CSS 属性生成动态内容。它可与伪元素 ::before 和 ::after 一起使用。此 CSS 属性在所有浏览器中均受完全支持，并用于在网页中插入生成的内容。

它会用生成的值替换元素。

语法

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

属性值

此 CSS 属性有许多值，在下表中定义

值	描述
正常	它用于设置默认值
无	此值不设置内容。
counter	它将内容设置为计数器。通常是一个数字。它通过使用 counter() 或 counters() 函数显示。
string	它用于设置任何字符串值。它必须始终用引号括起来。它会在 HTML 元素之前或之后生成任何字符串。
attr	它会在元素之后或之前插入指定属性的值。如果选择器没有特定属性，则会插入空字符串。
open-quote	它用于插入开引号，或者将内容设置为开引号。
close-quote	它用于插入闭引号，或者将内容设置为闭引号。
no-close-quote	如果指定了闭引号，则用于从内容中删除闭引号。
no-open-quote	如果指定了开引号，则用于从内容中删除开引号。
url	它用于将内容设置为某些媒体，可以是图像、视频、音频等。
初始	它用于将属性设置回其默认值。
Inherit	它从其父元素继承属性。

让我们看一些此 CSS 属性的示例。

示例 - 使用 normal 和 none 值

在此示例中，我们使用 ::before 伪元素在段落元素之前插入文本 “Welcome ”。文本不会添加到应用了 normal 和 none 值的那些段落元素上。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS content Property 
    </title> 
    <style>	
	body{
	text-align: center;
	}
	p{
	font-size: 25px;
	}
	p::before {  
            content: "Welcome "; 
        } 
          
        #para::before {  
            content: normal; 
        } 
        #para1::before {  
            content: none; 
        }
		</style> 
</head> 
  
<body> 
    <h1> CSS content property </h1> 
    <h2> Use of content: normal; and content: none; </h2> 
    <p> to the tpointtech.com </p> 
    <p id = "para"> This is a paragraph using <b>normal</b> value. </p> 
    <p id = "para1"> This is another paragraph using <b>none</b> value. </p> 	
	</body> 
</html>

输出

示例 - 使用 string 和 url 值

在此示例中，文本 “Hello World. Welcome ” 是通过使用 content 属性和 ::before 伪元素添加的。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS content Property 
    </title> 
    <style>	
	body{
	text-align: center;
	}
	p{
	font-size: 25px;
	}
	p::before {  
            content: "Hello World. Welcome "; 
        } 
          
        #para::before {  
            content: url("img.png"); 
        } 
        #para1::before {  
            content: url("img.png"); 
        }
		</style> 
</head> 
  
<body> 
    <h1> CSS content property </h1> 
    <h2> Use of content: string; and content: url(); </h2> 
    <p> to the tpointtech.com </p> 
    <p id = "para"> This is a paragraph using the <b>url()</b> value. </p> 
    <p id = "para1"> This is another paragraph using the <b>url()</b> value. </p> 	
	</body> 
</html>

输出

示例 - 使用 open-quote 和 close-quote 值

我们不能在没有 open-quote 的情况下应用 close-quote。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS content Property 
    </title> 
    <style> 
	body{
	text-align: center;
	}
	p{
	font-size: 25px;
	}
        p::before { 
            content: open-quote; 
        } 
		        p::after { 
            content: close-quote; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> CSS content property </h1> 
    <h2> Use of content: open-quote; and content: close-quote; </h2> 
    <p> Welcome to the tpointtech.com </p> 
    <p> This is another paragraph. </p> 
</body> 
</html>

输出

示例 - 使用 no-open-quote 和 no-close-quote 值

在此示例中，我们在段落元素上应用了 open-quote 和 close-quote，在类为 .para 的段落上应用了 no-open-quote 和 no-close-quote。

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
  content: open-quote;
}

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

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

p.para::after {
  content: no-close-quote;
}
</style>
</head>
<body>
    <h1> CSS content property </h1> 
    <h2> Use of content: no-open-quote; and content: no-close-quote; </h2> 
<p> Welcome to the tpointtech.com </p>
<p class="para"> This is another paragraph </p>

</body>
</html>

输出

示例 - 使用 attr()

attr() 函数允许我们插入特定属性的值。如果相应元素没有该属性，则会返回空字符串。

在此示例中，屏幕上显示的链接是通过使用 attr() 函数实现的。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS content Property 
    </title> 
    <style> 
	body{
	text-align: center;
	}
        a::after { 
            content: attr(href); 
        } 
    </style> 
</head> 
  
<body>
<h1> CSS Content property </h1>
<h2> The following link is displayed by using the <b>attr()</b> </h2>
    <a href= https://tpointtech.cn>Click here! 
    </a> 
</body> 
</html>

输出

下一主题CSS word-spacing

CSS content property

语法

属性值

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS content property

语法

属性值

相关帖子

CSS Descendant Selector

CSS Padding

CSS Last-Child

CSS 中的 Align Items

background-attachment

CSS justify-content

CSS root

CSS text-align

CSS sticky

Rounded Border CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器