CSS——伪元素&:before

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>

实现效果：