踩坑：transform 对 :before和:after无效

解决：

只需要在:before或者:after里面加上display:block-inline或者display:block-inline就好了：

.test::before{		
	display:block-inline;		//加上block-inline，即可实现transform效果
	content: '测试';
	transform: translateX(100px);
}

原因：

相关文档：
https://stackoverflow.com/questions/50252097/what-are-non-replaced-inline-blocks
https://www.cnblogs.com/answercard/articles/3747130.html
https://www.cnblogs.com/shenfangfang/p/5667848.html
https://www.it1352.com/867060.html
https://www.w3.org/TR/css-transforms-1/#transformable-element
https://stackoverflow.com/questions/16108346/transform-before-or-after-item