1. :before 和 :after 的主要作用是在元素内容前后加上指定内容,示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::before {
content: "你好,";
}
p::after {
content: "!!!"
}
</style>
</head>
<body>
<p>火星人</p>
</body>
</html>
效果如图:
以上代码是:before和:after的基本用法,但是这两种伪类还有很多更方便的用法。
2. :after清除浮动
元素设置浮动以后,其父元素以及父元素的兄弟元素的布局都会受到影响,如父元素的背景边框(如宽度,高度,背景颜色)不能正常显示,父元素的兄弟元素位置布局错误等,
为了避免这种浮动带来的影响必须要清除浮动,:after就是其中的一种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-s