伪元素已经不是什么新东东了, 平时大家在实际生产中肯定有使用过伪元素. 但伪元素能帮助我们做些什么呢?
伪元素是什么
元素事实上是 html 中的概念, 常常把 HTML 中的标签称作为元素. 那么伪元素是什么呢? 从其名称上来说, 伪即为假, 在实际的 DOM 中是不存在的, 而事实上呢? 我们可以借助一些 CSS 的特性让其模拟成一个元素, 对于这样的元素我们称之为伪元素.
CSS 伪元素用于向某些选择器设置特殊效果; 可以选中元素的特定位置, 并应用样式
伪元素是对指定文档之外的抽象, 比如, 文档设计不能访问元素中的第一个字和第一行的机制, 就会使用伪元素去引用它们, 还可以给不存在的内容进行添加样式.
CSS 中常见的伪元素有: first-line, :first-letter, :before, :after;
伪元素 | 表示位置 |
---|---|
first-letter | 第一个字符 |
first-line | 第一行 |
before | 元素前 |
after | 元素后 |
如何使用伪元素?
CSS 的伪元素是使用两个冒号, 是为了和其他伪类区别开来.
伪元素的语法:
selector:pseudo-element {property:value;}
选择器: 伪类 { CSS 样式 }
选择器选中的元素, 伪元素表示要在该元素的哪里应用样式.
CSS 类也可以与伪元素配合使用:
selector.class:pseudo-element {property:value;}
示例:
- hey::before{
- }
- hey::after{
- }
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16561.html