我们在之前的文章中介绍了一些CSS的选择器，这篇文章我们再介绍一种选择器，伪元素选择器。
在介绍之前，我们先补充一个伪类选择器:fous
<!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>
/* 当文本框获取焦点的时候背景颜色修改为red */
input:focus {
background-color: red;
}
</style>
</head>
<body>
这是文本框： <input type="text">
</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>Document</title>
<style>
/* 元素的开始 */
h1::before {
content: "hello";
background-color: blue;
}
/* 元素的结束 */
h1::after {
content: "world";
background-color: orange;
}
/* 第一个字母 */
h1::first-letter {
font-size: 50px;
}
/* 第一行 */
h1::first-line {
color: purple;
}
</style>
</head>
<body>
<h1>我是h1标题</h1>
</body>
</html>
