css中伪元素的使用方法小结（代码）

来源：易妖游戏网

本篇文章给大家带来的内容是关于css中伪元素的使用方法小结（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

把文本的第一个字母设为特殊的字母

<!DOCTYPE html >
<html>
	<head>
	<meta charset="utf-8"> 
	<title>自学教程(如约智惠.com)</title> 
	<style >
	p:first-letter {
	color:#ff0000;
	font-size:xx-large;
	}
	</style>
	</head>
	<body>
	<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
	</body>
</html>

把第一行文字设置为特殊

<!DOCTYPE html >
<html>
	<head>
	<meta charset="utf-8"> 
	<title>自学教程(如约智惠.com)</title> 
	<style >
	p:first-letter {
	color:#ff0000;
	font-size:xx-large;
	}
	</style>
	</head>
	<body>
	<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
	</body>
</html>

把第一行文字的第一个字母设置为特殊

<!DOCTYPE html >
<html>
	<head>
	<meta charset="utf-8"> 
	<title>自学教程(如约智惠.com)</title> 
	<style >
	p:first-letter{
	color:#ff0000;
	font-size:xx-large;
	}
	p:first-line {
	color:#0000ff;
	font-variant:small-caps;
	}
	</style>
	</head>
	<body>
	<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
	</body>
</html>

使用：在一个元素之前插入一些内容

<!DOCTYPE html >
<html>
	<head>
	<meta charset="utf-8"> 
	<title>自学教程(如约智惠.com)</title> 
	<style >
	h1:before {content:url(smiley.gif);}
	</style>
	</head>
	<body>
	<h1>This is a heading</h1>
	<p>The :before pseudo-element inserts content before an element.</p>
	<h1>This is a heading</h1>
	<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
	</body>
</html>

使用：在一个元素之后插入一些内容

<!DOCTYPE html >
<html>
	<head>
	<meta charset="utf-8"> 
	<title>自学教程(如约智惠.com)</title> 
	<style >
	h1:after {content:url(smiley.gif);}
	</style>
	</head>
	<body>
	<h1>This is a heading</h1>
	<p>The :before pseudo-element inserts content before an element.</p>
	<h1>This is a heading</h1>
	<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
	</body>
</html>