CSS伪元素详解-优快云博客

本文介绍了CSS伪元素:first-line、:first-letter、:before和:after的使用方法及可应用的属性，通过实例展示了如何对文本的首行和首字母进行样式设置，并在元素前后插入内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>CSS伪元素</title>
	<style type="text/css">
		/*:first-line伪元素 用于向文本的首行设置特殊样式
		*注意：first-line伪元素只能用于块级元素
		*可应用的属性
		*font
		*color
		*background
		*word-spacing
		*letter-spacing
		*text-decoration
		*vertical-align
		*text-transform
		*line-height
		*clear
		*/
		p:first-line{
			color:#ff0000;
			font-variant:small-caps;
		}
		/*:first-letter伪元素 用于向文本的首字母设置特殊样式,只能用于块级元素
		注释：下面的属性可应用于 "first-letter" 伪元素：
		*font
		*color
		*background
		*margin
		*padding
		*border
		*text-decoration
		*vertical-align (仅当 float 为 none 时)
		*text-transform
		*line-height
		*float
		*clear
		*/
		p:first-letter{
			color:#ff0000;
			font-size:xx-large;
		}
		/*:before伪元素 在元素的内容前面插入新内容*/
		h2:before{
			content:url(bibi.jpg);
		}
		/*:after伪元素 在元素的内容之后插入新内容*/
		h1:after{
			content:url(bibi.jpg);
		}
	</style>
</head>
<body>
	<h1>在内容之后插入图片——:after</h1>
	<p>
	You can use the :first-line pseudo-element <br>to add a special effect to the first line of a text!
	</p>
	<h2>在内容之前插入图片——:before</h2>
</body>
</html>

CSS之伪元素