伪元素::before和::after

概念：伪元素不是真正的元素，没有HTML元素与其对应，是通过CSS样式展现的

用法：

 <style>
        p:before{content: "hello " //content为必填属性，表示伪元素内容}
        p:after{content: "you are handsome!"}
    </style>
    <p>wonyun!</p>
	
	//等价于
	 <p>
        <span>hello </span>
        wonyun!
        <span> you are handsome!</span>
    </p>

特点：

1. 不属于文档，不能使用js操作
2. 伪元素属于主元素，故点击伪元素触发的是主元素click事件