使用 CSS 伪元素需要注意的

转载 2017年01月03日 17:29:20
文/九彩拼盘(简书作者)
原文链接: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 来设置样式时,会对第一个字母和符号都生效。好违反直觉。



css中::before和::after伪元素的几种用法

一 基本语法: 这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CS...
  • nikita1995
  • nikita1995
  • 2016年08月03日 23:01
  • 3151

css的伪元素::after和::before的使用

::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容。虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本下的效果是这样的: CSS代码...
  • sinat_16411539
  • sinat_16411539
  • 2016年04月26日 22:35
  • 1478

使用CSS:Before伪元素设置块级分割线

今天学习了css中:before选择器的用法。原来该选择器的作用是往元素的内容之前插入新内容,同时可以给内容设置样式,after也是同样的用法,而这两个伪元素的功用还仅于此,在这里,我只是介绍利用该伪...
  • BeiLinYu
  • BeiLinYu
  • 2017年01月18日 14:17
  • 2695

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特...
  • q1056843325
  • q1056843325
  • 2016年12月10日 19:59
  • 1440

使用CSS3 ::selection伪元素改变文本选中颜色

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefo...
  • wanglaf
  • wanglaf
  • 2017年07月07日 15:16
  • 106

使用css3伪元素实现遮罩效果

使用css3伪元素实现遮罩效果效果图:实现代码: body { font-family: '微软雅黑', Calibri, Arial, sans...
  • MajorMayer
  • MajorMayer
  • 2016年03月03日 15:36
  • 3581

css的伪类和伪元素使用示例

css中的 伪类 常用于 a标签的 状态设置,伪元素 设置 标签的 样式。 css伪类-标签的状态;伪元素 /*伪类将应用于未被访问过的链...
  • zxwd2015
  • zxwd2015
  • 2016年06月15日 14:16
  • 159

CSS伪类及伪元素的知识和使用

学习WEb技术当然首先要先学好HTMl和CSS基础知识和使用,但仅仅学习他们的一些基础标签、元素、以及颜色布局是不够的,要学就应该深入的去了解,用这些基础的只是做出更好的效果。     这里讲解一点...
  • qierjiang
  • qierjiang
  • 2011年08月26日 17:43
  • 1512

CSS伪元素实现3D按钮

  • 2013年08月14日 00:17
  • 83KB
  • 下载

CSS按钮与伪元素

  • 2013年04月20日 15:15
  • 82KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用 CSS 伪元素需要注意的
举报原因:
原因补充:

(最多只允许输入30个字)