定义:
之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。
当你看别人代码的时候,你会发现::before与:before
::before与:before
相同点:
1、伪类对象,用来设置对象前的内容
2、::before和:before写法是等效的
不同点:
:befor是Css2的写法,::before是Css3的写法
:before的兼容性要比::before好
建议:
不过在H5开发中使用::before比较好
优缺点
-
优点
- 减少dom节点数
- 让css帮助解决部分js问题,让问题变得简单
-
缺点
- 不利于SEO
- 无法审查元素,不利于调试
说明:
1、伪类元素要配合content属性一起使用
2、伪类元素是css渲染层加入的,不能通过js来操作
3、伪类对象特效通常通过:hover伪类样式来激活
css3伪元素有哪些?
1):first-letter:向文本的第一个字母添加特殊样式。
2):first-line: 向文本的首行添加特殊样式。
3):before:在元素之前添加内容。
4):after:在元素之后添加内容。
5)::placeholder:匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。(只支持双冒号的形式)。
6)::selection:CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。(只支持双冒号的形式)。
7)::backdrop(处于试验阶段):用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色。(只支持双冒号的形式)。
如何使用::before和::after
铺垫了这么多,回归正题
在元素前后增加额外的内容
before:选择器向选定的元素前插入内容,使用content属性来指定要插入的内容
after:选择器向选定的元素之后插入内容
例如
《JavaScript高级程序设计》
p::before{
content: "《";
color: #000000;
}
p::after{
content: "》";
color:#000000;
}
<p>JavaScript高级程序设计</p>
使用场景:
扩大按钮的可点击区域,增强用户体验
文字前面(后面)加图标
清除浮动
清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
方式一:
.classic-clearfix::after {
content: '';
display: block;
clear: both;
}
方式二:
.modern-clearfix {
display: flow-root;
}
使用 content 的属性