元素事实上是 html 中的概念, 常常把 HTML 中的标签称作为元素. 那么伪元素是什么呢? 从其名称上来说, 伪即为假, 在实际的 DOM 中是不存在的, 而事实上呢? 我们可以借助一些 CSS 的特性让其模拟成一个元素, 对于这样的元素我们称之为伪元素.
在 W3C 的标准规范中也有独立的规范文档, 时到今日, 伪元素的最新规范是 CSS Pseudo-Elements Module Level 4. 在该规范中有我们熟悉的伪元素, 比如::first-line,::first-letter,::selection,::placholder,::after 和::before, 也有我们不熟悉的::marker,::inactive-selection,::spelling-error 和::grammar-error.
CSS 伪元素是用来添加一些选择器的特殊效果.
CSS 伪元素控制的内容和元素是没有差别的, 但是它本身只是基于元素的抽象, 并不存在于文档中, 所以称为伪元素.
常用伪元素:
:first-line 伪元素用于向文本的首行设置特殊样式 (只能作用于块级元素)
:first-letter 伪元素用于向文本的首字母设置特殊样式 (只能作用于块级元素)
:before 伪元素可以在元素的内容前面插入新内容
:after 伪元素可以在元素的内容之后插入新内容
例子 1: 绘制三角形
通过以下代码可以简单的绘制三角形
可以根据需求将不需要用到的三角形隐藏: border-color:gray transparent transparent transparent
例子 2: 绘制太极图
基础结构为 2 个大小不同的 div, 通过 border-radius 将 div 变为圆形, 再由: before 制作与 div 不同原色的半圆
绘制左右两边的小圆
例子 3: 加载效果
利用伪元素与 h5 动画效果实现动画加载效果
最后添加动画效果
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17032.html