房子装修工程师CSS(七): 伪元素 ::before 和 ::after的用法介绍
一、W3C的解释用一句话概括:
单冒号(:
)用于CSS3伪类,双冒号(::
)用于CSS3伪元素。单冒号写法兼容性比较强[可支持解析的浏览器较多],双冒号的写法只支持较新的主流浏览器;
二、基础理论
-
::before
和::after
是用来给元素添加额外内容的,因为只存在于作用元素内容的前后 -
::before
和::after
内部的content支持以下三种特性!- 字符串[“可以是符号什么的也可以是单纯的字符” ,支持unicode编码!!]
- 属性[
attr()
, 可以获取标签上的元素属性,比如data-*
的自定义属性,title,alt这些] - 引用媒体文件[url ,可以链接图片作为背景图什么的]
- 计数器[
counter()
]
灵活运用这两个可以做好多东东,比如清除浮动,各种额外的视觉效果[阴影,跳转等]。