html父级添加伪类after,css :before :after伪类

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

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

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

注：行内元素只有设置了display：inline-block设置宽高才会有效。

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

}