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:'';
}