CSS pseudo-element after, before use example (2)

  By controlling the :after and :before pseudo-elements, many effects can be achieved, such as:




  code show as below:


<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">Disclaimer</div>
 	 	The event content, information, etc. are provided by the event organizer personally, and netizens are requested to check the authenticity and confirm the details by themselves. Please pay attention to personal and property safety when participating in activities.
 	 	http://wallimn.iteye.com。
</div>

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326792103&siteId=291194637