CSS- کاربرد کلاس کاذب after

[vahid ahmadi]

از این کلاس برای تزریق محتوا به بعد از یک عنصر خاص استفاده می شود.
در نمونه زیر یک منوی افقی طراحی شده که نوعی نشانگر کاراکتری در آن نمایش داده می شود.

CSS:

.menu {
	 text-align:center;
	 background:#EEEEEE;
	 border-bottom:solid 1px #E2E2E2
	 }
	 
.menu a{
	padding:10px 24px;
	text-decoration:none;
	color:gray; display:inline-block;
	font:bold 13px verdana;
	position:relative
}

.menu a:hover{
	color:white;
	background:#595959
	}
	
.menu a:hover span:after{
	content:"▼";
	color:#595959;
	position: absolute;
	left:25px;
	top:27px;
	right:25px;
	font-size:20px
	}

HTML:

<div class="menu">

		<a href="#"><span></span>Home</a>
		<a href="#"><span></span>Contact</a>
		<a href="#"><span></span>About</a>
		<a href="#"><span></span>Map</a>
</div >

[نویسنده]

نوشته‌ها