CSS——伪元素&:before
简单介绍：
::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。
<style>p:before{content: "1";p:after{content: "3";}</style><p>2</p>
使用示例：
&:before竖条
<header class="header">日志</header><el-timeline><el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">{{ activity.content }}</el-timeline-item></el-timeline>
const activities = [{content: 'Event start',timestamp: '2018-04-15'},{content: 'Approved',timestamp: '2018-04-13'},{content: 'Success',timestamp: '2018-04-11'}]
<style scoped lang="scss">.header {position: relative;padding-left: 10px;font-weight: 800;font-size: 16px;margin-bottom: 20px;&:before {content: '';display: block;width: 4px;height: 20px;background: #1890ff;border-radius: 2px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}}
</style>
实现效果：
