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

　　大家都知道使用CSS可以容易使用以下效果。

　　配合after、before伪元素，可以将上述效果与DOM元素结合，用极简有DOM元素（不用增加新的元素）实现原来较复杂、或无法实现的效果，如气泡文字、方块修饰、下划线等。

　　附：文中用到的CSS代码。阅读时请注意，本文未充分考虑浏览器兼容问题。

    <style type="text/css">
    	.dialog{
    		width:200px;
    		border:1px solid gray;
    		border-radius:8px;
    		font-size:18px;
    		line-height:32px;
    		position:relative;
    		padding-left:10px;
    	}
    	.dialog:before{
    		content:"";
    		display:block;
    		position:absolute;
    		width:12px;
    		height:12px;
    		border:1px solid gray;
    		border-width:1px 0 0 1px;
    		left:-7px;
    		top:10px;
    		background-color:white;
    		-webkit-transform:rotate(-45deg);
    		-moz-transform:rotate(-45deg);
    		transform:rotate(-45deg);
    	}
		div.border-example1{
			width:0;
			height:0;
			border-style:solid;
			border-width:24px;
			border-color:red blue;
		}
		div.border-example2{
			width:0;
			height:0;
			border-style:solid;
			border-width:24px 24px 24px 0;
			border-color:white gray;
		}
		
		div.border-example3{
			width:24px;
			height:24px;
			background-color:red;
		}
		div.border-example4{
			width:24px;
			height:24px;
			background-color:red;
			-webkit-transform:rotate(-45deg);
			-moz-transform:rotate(-45deg);
			transform:rotate(-45deg);
		}
		div.border-example5{
			width:24px;
			height:24px;
			border-style:solid;
			border-width:1px 0 0 1px;
			border-color:red;
			-webkit-transform:rotate(-45deg);
			-moz-transform:rotate(-45deg);
			transform:rotate(-45deg);
		}
		div.border-example6{
			width:24px;
			height:24px;
			border-radius:12px;
			background-color:red;
		}    	
    	.rect{
    		line-height:36px;
    		height:36px;
    		background-color:gray;
    		padding:0 20px;
    		position:relative;
    	}
    	.rect:before{
    		content:"";
    		position:absolute;
    		width:12px;
    		height:12px;
    		top:12px;
    		background-color:blue;
    		left:4px;
    	}
    	.hr{
    		position:relative;
    	}
    	.hr:after{
    		content:"";
    		position:absolute;
    		width:auto;
    		left:0;
    		right:0;
    		bottom:0;
    		height:1px;
    		background-color:red;
    	}    	
    </style>