注意：
1.船の前後は要素ですが、インライン要素に属しています。幅と高さを設定する必要がある場合は、display：inline-blockを設定する必要があります。
2.新しく作成された要素がドキュメントツリーに見つからないため、疑似要素と呼びます。
3.構文：element :: before {}
4.beforeとafterはcontent属性で設定する必要があります
5.Beforeは、親要素のコンテンツの前に要素を作成し、親要素のコンテンツの後に要素を挿入します
6.疑似要素セレクターはラベルセレクターと同じですが、重みは1です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是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>