伪元素 before after

1，作用:

伪元素的作用是在内容元素的前后插入额外的元素，但它是一个虚假的元素，不会影响内容元素的DOM节点

2，用法:

伪元素使用起来也比较容易，在CSS2.1的时候，一个冒号：表示伪元素。在CSS3中，为了区分伪类和伪元素，
用：(一个冒号)表示伪类 :: (两个冒号)表示伪元素，目前在开发中，两种方式都行

3，注意：

伪元素必须设置content属性，不然无效

4，常用案例：

（1）分隔符， (2) 添加前置图标，（3）三角形实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    	ul {
    		list-style: none;
    	}
    	li {
    		position: relative;
    		display: block;
    		margin:15px;
    	}
    	li::before {
    		content: '';
    		background: url(dist/static/img/chop_min.eb28a5e.png) no-repeat;
        background-size: 100%;    
				width:20px;
				height:20px;
				position: absolute;
				left: -30px;
    	}
    	li:not(:last-child)::after {
    		content: '|';
    		padding:0 10px;
    	}
    	.demo {
    		width:0;
    		height: 0;
    		border: 40px solid transparent;
    		border-left: 40px solid #ff0000;
    	}
    	.test {
    		width:200px;
    		height: 50px;
    		line-height: 50px;
    		background:red;
    	}
    	.test::before {
    		display: inline-block;
    		content: '';
    		border: 5px solid transparent;
    		position: relative;
    		left: 200px;
    		border-left-color:red;
    	}
    </style>
  </head>
  <body>
  	 <ul>
	  	 	<li>HTML5</li>
	  	 	<li>CSS</li>
	  	 	<li>JavaScript</li>
  	 </ul>
  	 <p class="demo"></p>
  	  <p class="test"></p>
  </body>
</html>

5，效果截图

伪元素 before after

6，注意：

（1） content可以添加图片url(),但是没法修改图片大小，所以可以用背景图片替换该功能。
（2）如果li想横向排列，可以设置display: inline-block