伪元素选择器
伪元素选择器可以利用css创建标签元素,而不需要HTML标签,简化HTML结构
- ::before 在元素内部的前面插入内容
- ::after 在元素内部的后面插入内容
注意
- before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:element::before{}
- before和after必有content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
- div{
width: 200px;
height: 200px;
background-color: aquamarine;
}
div::before{
content: ‘我’;
}
div::after{
content: ‘007’;
}
- 伪元素选择器和标签选择器一样,权重为1
伪元素选择器使用场景1:伪元素字体图标
div{
width: 200px;
height: 35px;
border: 1px solid palegreen;
position: relative;
}
div::after{
content: '↓';
position: absolute;
top: 5px;
right: 10px;
font-size: 18px;
color: blue;
font-size: large;
}
伪元素选择器使用场景2:仿土豆效果
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img{
width: 100%;
height: 100%;
}
.tudou::before{
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(下箭头.png) no-repeat center;
}
.tudou:hover::before {
/* 而是显示元素 */
display: block;
伪元素选择器使用场景3:清除浮动##
在盒子模型中,对最后一个元素添加伪元素
第一种
.last::after{
content:'';/*伪元素必写*/
display:block;/*插入的必须是块级元素*/
height:0;/*隐藏该元素*/
visibility:hidden;/*隐藏该元素*/
clear:both;/*清除浮动*/
}
第二种
.one::before, .one::after{
content:'';
display:table;/*转换成块级元素并在一行上显示*/
}
.one::after{
clear:both;
}