css :before :after伪类

1. :before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。

如需定位定位伪类元素在指定元素之内，需设置指定元素的定位属性，这样伪类添加的元素才会相对于指定元素定位。

否则伪类元素将相对于更上一级已定位的元素定位，如果没有，则相对于浏览器窗口定位。

注：行内元素只有设置了display：inline-block设置宽高才会有效。（float之后，也有效）

2. 用伪类做样式的准则：

    1）容器元素尽量设置 box-sizing:border-box，方便固定大小，

    2）容器元素必须设置display:inline-block

    3）伪类元素必须设置content:''，否则伪类元素画的形状将不会显示

     4）容器元素设置text-indent:-9999px;将容器内的内容清除，但该元素只对块级元素有效，因此容器元素必须设置display:inline-block

示例：

.afbe{
   box-sizing:border-box;
   position:relative;
   display:inline-block; 
   width:32px;
   height:32px;
   text-indent:-9999px;
   border:2px solid red;
   box-shadow:inset -50px 0 10px 12px;
}
.afbe:before{
   position:absolute;
   width:11px;
   height:11px;
   left:23px;
   top:8px;
   border:2px solid rgb(0,0,0);
   content:'';
}