Examples of CSS pseudo-elements after and before use (3)

　　The user:after element realizes the dovetail effect of the small flag. As shown below:

　　The code is very simple, just rotate the :after element:

    <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">I. Activity Description</div>
	<div class="section__bd">
	Cascading Style Sheets (English full name: Cascading Style Sheets) is a
	</div>
  
	<div class="section__title">Second, itinerary</div>
	<div class="section__bd">
	Cascading Style Sheets (English full name: Cascading Style Sheets) is a
	</div>