CSS的content属性怎么用？_css的content的用法-优快云博客

CSS中的Content属性用于动态生成内容（在运行时）；该属性可以与伪元素::before或::after一起使用，用于插入生成内容。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

CSS content属性的使用

content属性与 :before 及 :after 伪元素配合使用，用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

语法：

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

属性值：

●　normal：设置默认值。如果内容属性正常，则设置内容。

Element::before|after { 
    content: normal;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			p::before {
				content: "Welcome ";
			}
			
			a::before {
				content: normal;
			}
		</style>
	</head>

	<body>
		<p id="a">you</p>
		<p>you</p>
	</body>
</html>

输出：

Welcome you 
Welcome you

●　none：不设置伪元素::before或::after的内容。

Element::before|after { 
    content: none;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
		p::before {  
            	content: "Hello "; 
	        } 
	          
	        p#a::before {  
	            content: none; 
	        }
		</style>
	</head>

	<body>
		<p>world！</p>
		<p id="a"> world！</p>
	</body>
</html>

输出：

Hello world！
world！

●　initial：它将属性设置为其默认值。

Element::before|after {
    content: initial;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			p::before {  
	            content: "Welcome "; 
	        } 
	          
	        a::before {  
	            content: initial; 
	        }
		</style>
	</head>

	<body>
		<p>world!</p>
		<p id="a">you!</p>
	</body>
</html>

输出：

Welcome world!
Welcome you!

●　attr：设置包含指定值的属性值。

Element::before|after { 
    content:attr(href); 
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			a::after { 
	            content: attr(href); 
	        } 
		</style>
	</head>

	<body>
		<a href="https://www.html.cn">点击这里! </a>
	</body>
</html>

输出：

●　String：用于在HTML元素之前和之后生成任何字符串。

Element::before|after { 
    content: string;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style> 
      
        /* 使用的字符串值 */ 
        p::before {  
            content: "Hello "; 
        } 
    </style> 
</head> 
  
<body> 
    <p>World!</p> 
</body> 
</html>

输出：

Hello World!

●　open-quote：它在元素前后生成左引号。

Element::before|after { 
    content: open-quote;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style> 
		    p::before { 
		        content: open-quote; 
		    } 
    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
</body> 
</html>

输出：

"Hello World!

●　close-quote：在元素前后生成右引号。

Element::before|after { 
    content: close-quote;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style> 
		    p::after { 
	            content: close-quote; 
	        }
	        p::before { 
	            content: open-quote; 
	        }
    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
</body> 
</html>

输出：

"Hello World!"

●　no-open-quote：如果指定左引号，它将从内容中删除左引号。

Element::before|after { 
    content: no-open-quote;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			p::before { 
	            content: open-quote; 
	        }
		    p::before { 
	            content: no-open-quote; 
	        }
    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
</body> 
</html>

输出：

Hello World!

●　no-close-quote：如果指定右引号，它将从内容中删除右引号。

Element::before|after { 
    content: no-close-quote;
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			p::before { 
	            content: close-quote; 
	        }
		    p::before { 
	            content: no-close-quote; 
	        }
    </style> 
</head> 
  
<body> 
    <p>Hello World!</p> 
</body> 
</html>

输出：

Hello World!

●　inherit：继承自其父元素。

Element::before|after { 
    content: inherit;
}

浏览器支持

content属性支持的浏览器如下所示：

●　Google Chrome 1.0

●　Internet Explorer 8.0

●　Firefox 1.0

●　Safari 1.0

●　Opera 4.0