高度自适应九宫格的after和before那里不太懂呀

Question

.page {
    position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
}
.list {
	float: left;
	height: 33.3%; width: 33.3%;
	position: relative;
}
.list:before {
	content: '';
	position: absolute;
	left: 10px; right: 10px; top: 10px; bottom: 10px;
	border-radius: 10px;
	background-color: #cad5eb;
}
.list:after {
	content:attr(data-index);
	position: absolute;
	height: 30px;
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto;
	text-align: center;
	font: 24px/30px bold 'microsoft yahei';
}