关闭

使用 CSS 伪元素需要注意的

121人阅读 评论(0) 收藏 举报
文/九彩拼盘(简书作者)
原文链接:http://www.jianshu.com/p/378f474c1ad0
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

伪元素 ::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

  1. 只对 displayblockinline-block 之类的块级元素有效。
  2. 对内容的开头是符号,或者第一个是英文字母或数字,第二个是符号的,使用 ::first-letter 来设置样式时,会对第一个字母和符号都生效。好违反直觉。



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21170次
    • 积分:688
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:33篇
    • 译文:0篇
    • 评论:2条