Css 伪元素
什么是伪元素？它的应用场景在那里？
伪元素：由Css模拟出标签效果的元素，但同样具备标签的所有属性，默认行内显示模式。
应用场景：网页中一些装饰的符号，图标等…
| 伪元素 | 描述 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后面添加一个伪元素 |
注意：
- 必须设置content属性才能生效
示例
<!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>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.box::before {
content: '键盘';
color: red;
font-size: 18px;
}
.box::after {
content: '过万';
}
</style>
</head>
<body>
<!-- 键盘敲烂，月薪过万 -->
<div class="box">敲烂,月薪</div>
</body>
</html>