before和after的强大

前言：刚学他两个的时候，是用于清除浮动，而且曾单纯的以为俩只有这作用。

但看到几篇博客后，发现自己是多么的无知，他两个的强大远不止于此。

当然，这篇文章大多数是借鉴网上的实例，在加上自己的些许简介而成。

首先说明几点

　　1，before和after中的之前和之后是指的是标签的左右，类似于js中的insertbefore和insertafter

　　2,不适用于单标签，例如<img>、<input>。他俩意为添加，单标签无法添加，so。。。

下面总结几个

一，巧用before实现心形背景

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         h1 {
 8             position: relative;
 9             top: 20px;
10             left: 20px;
11             color: #ff1f2d;
12         }
13 
14         h1:before {
15             position: absolute;
16             top:-50px;
17             font-size: 100px;
18             color: #abcdef;
19             content: "2764";
20             z-index: -1;
21         }
22 
23     </style>
24 </head>
25 <body>
26 <h1>晨落梦公子</h1>
27 </body>
28 </html>

效果图：

附上content编码：http://www.shangxueba.com/jingyan/1806634.html

二、划入变亮效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         span {
 8             position: relative;
 9             top: 20px;
10             left: 20px;
11             color: #ffffff;
12             background: coral;
13             padding: 10px;
14         }
15 
16         span:after {
17             position: absolute;
18             top: 0;
19             left: 0;
20             right: 0;
21             bottom: 0;
22             background: rgba(255,255, 255, .2);
23             z-index: 1;
24         }
25 
26         span:hover:after {
27             content: "";
28         }
29     </style>
30 </head>
31 <body>
32 <span>划入变亮</span>
33 </body>
34 </html>

三、实现行级元素换行

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         span:after {
 8             content: "A";
 9             white-space: pre;
10         }
11     </style>
12 </head>
13 <body>
14 <span>aaa</span>
15 <span>bbb</span>
16 <span>ccc</span>
17 </body>
18 </html>

效果图：

总言：先总结到这吧，它的用处其实还有很多很多。。。