CSS3 ：before和：after伪元素

“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。

        p.box::before{
            content: "#";
        }
        p.box::after{
            content: "#";
        }

浏览器截图：

像上面那样用：before和：after锁定相同的元素。严格的说，在代码中他们是伪元素。
1.1需要注意的是，你可以设置content属性的内容为空，但是不可以完成移除content属性，否则伪元素将不起作用。至少，content属性需要空引用作为它的值(即:content:“”)。
1.2可以用两个冒号（::before和::after）写伪元素，对于这两种写法没有什么不同，仅仅一点不同的是，伪元素（双冒号），css3中的是伪类是（单冒号）。
1.3插入内容的特点
插入的内容在页面的源码里是不可见的。只能在css里可见

同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。
（当元素为块级元素时，设置的宽高有效。而当元素时内联元素时，设置的宽高对元素不起作用。）

p.box::before{
            content: "#";
            display: block;
            width: 100px;
            height: 100px;
            background-color: #dcdcdc;
        }
        p.box::after{
            content: "#";
            /*display: block;*/
            width: 100px;
            height: 100px;
            background-color: #dcdcdc;
        }

浏览器截图：

1.4你的直觉是：before和：after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是，不是这样的。

注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。

p.box {
          width: 300px;
          border: solid 1px red;
          padding: 20px;
        }

        p.box:before {
          content: "#";
          border: solid 1px red;
          padding: 2px;
          margin: 0 10px 0 0;
        }   

浏览器截图：

可以看到，不是插入“before”到段落，而是伪元素被置于到此段落的“box content”的前面。
1.5可利用伪元素画一些图形

.box{
            max-width: 750px;
            min-height: 130px;
            margin-left: 25px;
            background: #f2f2f2;
            padding: 10px 40px 0px;
            position: relative;
            border-radius: 5px;
        }
         .box:before{
            display: block;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 8px solid #f2f2f2;
            border-top-color: transparent;
            border-left-color: transparent;
            left: -16px;
            top: 40px;
            content: " ";
        }

    <div class="box">

<style>
        body{
            background:#ccc;
        }
        .jiao{
            height:400px;
            width:500px;
            margin:30px auto;
            background:#fff;
            position: relative;
            overflow: hidden;
        }
        .jiao::before{
            display:block;
            content:"";
            width:130%;
            height:100px;
            background:#ccc;
            position: absolute;
            top:-100px;
            transform-origin: left bottom;
            transform: rotate(8deg);
        }
    </style>

<div class="jiao">