Why can't this css arrow be displayed? _html/css_WEB-ITnose

I found that the following code runs very well under IE8, IE9, and Firefox, but when running under IE7, the upward arrow disappears. Please help me find out the reason, thank you.

<style>	.arrow_box {		position: relative;		background: #88b7d5;		border: 4px solid #c2e1f5;	}	.arrow_box:after, .arrow_box:before {		bottom: 100%;		border: solid transparent;		content: " ";		height: 0;		width: 0;		position: absolute;		pointer-events: none;	}	.arrow_box:after {		border-color: rgba(136, 183, 213, 0);		border-bottom-color: #88b7d5;		border-width: 30px;		left: 50%;		margin-left: -30px;	}	.arrow_box:before {		border-color: rgba(194, 225, 245, 0);		border-bottom-color: #c2e1f5;		border-width: 36px;		left: 50%;		margin-left: -36px;	}</style><br/><br/><br/><div class="arrow_box"><h1 class="logo">css arrow please!</h1></div>

Reply to discussion (solution)

Compatibility issue, only ie8 and above versions support pseudo-classes: after and :before, refer to here http ://msdn.microsoft.com/zh-cn/library/cc304076.aspx

1 If you want to write compatibility together, it is best not to use before