伪元素选择器可以帮助我们利用CSS创建新标签元素, 而不需要 HTML 标签,从而简化结构
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
before 和 after 创建一个元素, 但是属于行内元素
新创建的这个元素在文档树中是找不到的, 所以我们称为 伪元素
语法 element::before { }
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素, after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样, 权重为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* 权重是2 */
div::before {
/* 这个content是必须要写的 */
display: inline-block;
content: '我';
width: 30px;
height: 40px;
background-color: purple;
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
伪元素选择器 配合字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?l8pdiz');
src: url('fonts/icomoon.eot?l8pdiz#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?l8pdiz') format('truetype'),
url('fonts/icomoon.woff?l8pdiz') format('woff'),
url('fonts/icomoon.svg?l8pdiz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ''; */
content: '\ea3e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
仿土豆网显示隐藏遮罩系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿土豆网显示隐藏遮罩系列</title>
<style>
.tudou {
/* 子绝父相 */
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto ;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 想隐藏又不占位置 用display */
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子 , 就让里面的before遮罩层显示出来 */
.tudou:hover::before {
/* 不是转化为块级元素 二十显示元素的意思 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
</body>
</html>