前言：刚学他两个的时候，是用于清除浮动，而且曾单纯的以为俩只有这作用。
但看到几篇博客后，发现自己是多么的无知，他两个的强大远不止于此。
当然，这篇文章大多数是借鉴网上的实例，在加上自己的些许简介而成。
首先说明几点
1，before和after中的之前和之后是指的是标签的左右，类似于js中的insertbefore和insertafter
2,不适用于单标签，例如<img>、<input>。他俩意为添加，单标签无法添加，so。。。
下面总结几个
一，巧用before实现心形背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
position: relative;
top: 20px;
left: 20px;
color: #ff1f2d;
} h1:before {
position: absolute;
top:-50px;
font-size: 100px;
color: #abcdef;
content: "\2764";
z-index: -1;
} </style>
</head>
<body>
<h1>晨落梦公子</h1>
</body>
</html>
效果图：
附上content编码：http://www.shangxueba.com/jingyan/1806634.html
二、划入变亮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
position: relative;
top: 20px;
left: 20px;
color: #ffffff;
background: coral;
padding: 10px;
} span:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255, 255, .2);
z-index: 1;
} span:hover:after {
content: "";
}
</style>
</head>
<body>
<span>划入变亮</span>
</body>
</html>
三、实现行级元素换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span:after {
content: "\A";
white-space: pre;
}
</style>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</body>
</html>
效果图：
总言：先总结到这吧，它的用处其实还有很多很多。。。