伪元素选择器

伪元素选择器

伪元素选择器可以利用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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

伪元素选择器使用场景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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

伪元素选择器使用场景3：清除浮动##

在盒子模型中，对最后一个元素添加伪元素

第一种

.last::after{
    content:'';/*伪元素必写*/
    display:block;/*插入的必须是块级元素*/
    height:0;/*隐藏该元素*/
    visibility:hidden;/*隐藏该元素*/
    clear:both;/*清除浮动*/
｝
1
2
3
4
5
6
7

第二种

.one::before, .one::after{
content:'';
display:table;/*转换成块级元素并在一行上显示*/
}
.one::after{
clear:both;
}
1
2
3
4
5
6
7