<!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>