CSS伪元素after、before使用示例（三）

　　用户:after元素实现小旗的燕尾效果。如下图所示：

　　代码很简单，就是把:after元素旋转一下：

    <style type="text/css">
    	.section__title{
    		width:10em;
    		padding-left:1em;
    		height:1.6em;
    		line-height:1.6em;
    		vertical-align:middle;
    		background-color:red;
    		position:relative;
    	}
    	
    	.section__title:after{
    		content:"";
    		position:absolute;
    		display:block;
    		width:1.6em;
    		height:1.6em;
    		right:-0.5em;
    		top:0.1em;
    		background-color:white;
			-ms-transform:rotate(45deg); 	/* IE 9 */
			-moz-transform:rotate(45deg); 	/* Firefox */
			-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
			-o-transform:rotate(45deg); 	/* Opera */
    		tranform:rotate(45deg);
    	}
    	.section__bd{
    		text-indent:2em;
    		margin-bottom:1em;
    		margin-top:0.5em;
    	}
    </style>

	<div class="section__title">一、活动说明</div>
	<div class="section__bd">
	层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
	</div>
  
	<div class="section__title">二、行程安排</div>
	<div class="section__bd">
	层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
	</div>