伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
1，::first-letter 表示第一个字母
2，::first-line 表示第一行
3，::selection 选中的内容
4，::before 元素的开始位置
5，::after 元素的结束位置
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>
/* lorem 生成随机英文段落
下载Chinese Lorem插件，jw 生成随机中文段落 */
/* 需求一：让文章的首字母一直为字体为24px */
p::first-letter {
font-size: 24px;
}
/* 需求二：让文章的第一行添加背景色黄色 */
/* 需求三：让选中的内容，字体为红色 */
/* 需求四：在元素开始的位置前+'abc' */
p::before{
content: '你好';
color:red
}
</style>
</head>
<body>
<q>hello</q>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod cupiditate, tempora omnis impedit deleniti, iure fuga illo
quibusdam. Alias, soluta?
</p>
</body>
</html>
