伪元素 ::before，::after 1. 空元素(不能包罗内容的元素)不撑持 ::before，::after

IE 不撑持的元素有：img，input，select，textarea。

FireFox 不撑持的元素有：input，select，，textarea。

Chrome 不撑持的元素有：input[type=text]，textarea。

2. 必需设置 content 属性

若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。如：

.a:before { content: ‘‘; display: block; width: 100px; height: 100px; background-color: red; }

3. content 的属性值要遵循一些法则

要遵循如下法则：

如果 content 的值是常量，必需用单引号或双引号括起来。如：content:‘abc‘; , content:"abc";。

如果 content 的值是该元素的某个属性于常量组合而成的，常量仍然要用单引号或双引号括起来,之间不需要加号。如：content: ‘(‘attr(title)‘)‘;。觉得这种写法好违法直觉。

若 content 的属性值不遵循如上要求，则伪元素不会显示。

4. content 的属性值中如何设置特殊字符？

如下表所示：

特殊字符content 中这么写
空格   content:"\00a0";  
<   content:"\003c";  
>   content:"\003e";  
&   content:"\0026";  
"   content:"\0022";  
©   content:"\00a9";  
®   content:"\00ae";  
×   content:"\00d7";  

更多见 这里。

伪元素 ::first-letter，::first-line

只对 display 为 block 和 inline-block 之类的块级元素有效。

对内容的开头是标记，或者第一个是英文字母或数字，第二个是标记的，使用 ::first-letter 来设置样式时，会对第一个字母和标记都生效。好违反直觉。