天天看点

HTML5学习_day05(8)--html之伪类元素选择器(伪元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类元素选择器</title>
		<style type="text/css">
			div:after{
				content: "后面添加";
			}
			div:before{
				content: "前面的";
			}
		</style>
	</head>
	<body>
		:before 在内容前面添加一个元素
		:after 在内容后面添加一个元素
		添加内容用content属性
		<div>123</div>
		content:属性值
		
		1.content:“字符串”;
		
		2.图片 content:url(图片路径);注意:图片是原尺寸插入 不可改变大小
		
		3.空 content:"";
		
		4.计数器:content:counter(li);计数列表时非常方便。
		注意:伪元素时不可以通过content属性来插入html代码的. 错误代码:content:"<h1>标题<h2>"
		:before :after作用:在内容前面或后面添加额外的内容。
		在css3中伪元素用双冒号(::)来表示,主要是为了区分伪类(:);
		6.用伪元素清除浮动。
		注意:一定是在父级上写
		语法:
		选择器:after{
			content:"";
			dispaly:block;<!-- 要注意转化成块级标签-->
			clear:both;
		}
	</body>
</html>
           

继续阅读