CSS 伪元素
伪元素 ::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 来设置样式时,会对第一个字母和符号都生效。好违反直觉。
相关文章
.
相关推荐
myloveqiqi 2020-08-09
云中舞步 2020-11-12
杨德龙 2020-11-11
JohnYork 2020-10-16
wangzhaotongalex 2020-09-22
xiaoseyihe 2020-11-16
不要皱眉 2020-10-14
Crazyshark 2020-11-13
K先生 2020-11-10
momode 2020-09-11
思君夜未眠 2020-09-04
点滴技术生活 2020-08-21
MaggieRose 2020-08-19
kevinweijc 2020-08-18
wintershii 2020-08-17
vapaad 2020-08-17
wera00 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16