伪元素,顾名思义就是假的元素。是指在html结构中看不到的元素。直接在css代码中实现。用法为,在元素后面加::(两个冒号)。比较常用的有::before 和::after。
意思分别是在盒子内容的前面和后面加一个伪元素。
用法:
.box::before {
content: ‘before’;
}
.box::after {
content: ‘after’;
}
在box盒子内容前面添加文字“before”。后面添加文字"after"
需要注意的是:
1、content属性必须要写,不想写内容可以为空congtent:‘ ’;
2、伪元素默认为行内元素。不可直接设置宽高。
3、可以在css中设置伪元素的其他属性(其他元素所具有的属性)如:显示模式,宽高,浮动定位,颜色背景颜色,字体属性,字体大小等等`~~~。
4、根据这些属性可以很方便的使用伪元素,并且可以减少html结构中的代码量。如下:
一、伪元素插入字体图标
首先引入阿里妈妈在线字体(其他方式也可,个人感觉比较方便而已)。
然后在需要插入字体图标的标签加上伪元素,(before内容前,after在内容后。可根据具体情况)
给伪元素设置content:“\图标代码 ”;(content内容是反斜杠加图标后4位代码)如 仅需要写e614即可。
之后声明字体 fontfamily:“iconfont”;
.box::before {
content: '\e614';
font-family: "iconfont";
}
即可。放大镜图标出现。字体图标的本质是字体,所以可以通过设置字体大小来控制字体图标的大小。
二、精灵图或者背景图片也可以使用字体图标来用;不过需要先把伪元素转化为块或者行内块元素才可设置宽高;
如下:
.box::after {
content: ‘after’;
display: block;
height: 20px;
width: 60px;
background: url(’…/…/02-CSS/第四天audio/images/images/arr.png’) no-repeat 40px 0 / contain;
}
这就通过伪元素after插入一个背景图片;
而html结构中仅有一个盒子。
三、通过伪元素来清除浮动
由于浮动的元素不占位置,因此不能撑开父盒子,但是由于条件限制又不能直接给父盒子设置高度。导致下面的盒子会上来。这就是浮动造成的影响。
我们可以使用伪元素来清除浮动造成的影响。
假设box盒子中的元素都设置了浮动。并且box没有设置高度,
这时我们给box添加伪元素:
.box1::after {
content: ‘’;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
.box {
*zoom: 1
}
开发中常用的方法是给一个类名设置伪元素,用到的时候直接调用类名比较方便;如:
.clearfix::after {
content: ‘’;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
.clearfix {
*zoom: 1
}
使用的时候只需要给盒子加上 class=“clearfix”即可清除浮动。