CSS伪元素after、before使用示例(二)

  通过对:after、:before伪元素的控制,可以发挥相像力实现很多效果,如:




  代码如下:


<style type="text/css">
.declare__content{
	border:1px solid #faa85f;
	border-radius:8px;
	position:relative;
	padding:1.5em;
	text-indent:2em;
}
.declare__title{
	position:absolute;
	left:2em;
	top:-12px;
	height:24px;
	line-height:24px;
	background-color:white;
	width:5.5em;
	text-align:center;
	text-indent:0;
}
.declare__title:before,
.declare__title:after{
	content:"";
	position:absolute;
	display:block;
	width:8px;
	height:8px;
	border-radius:4px;
	background-color:#faa85f;
	top:8px;
}
.declare__title:before{
	left:-4px;
}
.declare__title:after{
	right:-4px;
}
</style>

<div class="declare__content">
	<div class="declare__title">免责声明</div>
 	 	活动内容、信息等由活动组织者个人提供,请网友自行核对真伪、确认细节。参加活动,请注意人身及财产安全。
 	 	http://wallimn.iteye.com。
</div>

猜你喜欢

转载自wallimn.iteye.com/blog/2364077
今日推荐