伪元素天生存在于任意元素里面，任意元素里面有两个特殊的伪元素，一个叫before一个叫after。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<title></title>
</head>
<body>
<span>123</span>
</body>
</html>
span::before{
content: "456";
}
span::after{
}
伪元素就是这么来写，中间有两个冒号，你不小心写了一个冒号也会给你当成伪元素来处理，
针对伪元素必须有的是content，比如上面content: "456";，在页面中就会体现出来，而且456是伪元素的内容而且456还属于span。
为什么叫伪元素，是因为他的元素结构是存在的，但是他又没有写在HTML里面，他可以被css操作，但是他没有元素结构。
after也同理。
伪元素天生就存在，我们只不过是通过css把他选中（不是创造），并且进行修改。
Content只能用在伪元素里面，用在其他元素里面不好使。
因为伪元素没有一个确切的结构，你很难通过html形式往里面去加内容，所以你之能通过css的content属性往里面加内容。即使你伪元素里面啥也不写，你也得把content加上（content: "";）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span::before{
content: "";
width: 100px;
height: 100px;
background-color: red;
}
</style>
<title></title>
</head>
<body>
<span>123</span>
</body>
</html>
我现在给伪元素加个宽加个高，你看他会有吗？
- 没有！！
为什么？
因为伪元素是行级元素，他天生是illine的，咱们给他改成inline-block就可以了。
他可以当成正常元素来使用，一个在逻辑之前，一个在逻辑之后，可以进行定位……