高度自适应九宫格的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'; }