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

以上就是CSS的content属性怎么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读