شبه عناصر before: و after: در CSS

به نام خدا

با سلام خدمت دوستان عزیز سون لرنی.css-beforeafter-0

شبه عناصر[tag] :before[/tag] و[tag] :after[/tag] همونطور که هم که از اسمشون پیداست میتونند در اول و آخر یک عنصر، عنصر جدیدی ایجاد کنند تا به وسیله ی اون بتونیم کنترل بیشتری برای استایل دادن به عناصر HTML داشته باشیم. به مثال زیر توجه کنید.

<!-- HTML Code -->
	<div class="div-class">
		<span>This is before text.</span>
		This is main text.
		<span>this is after text.</span>
	</div>
/* CSS Code */
.div-class{
	line-height: 20px;
}
.div-class span{
	display: block;
}

خروجی به صورت زیر خواهد بود:

01

و حالا اگه بخواهیم همین کار رو با استفاده از شبه عناصر [tag]:before[/tag] و [tag]:after[/tag] انجام دهیم، کدهامون به صورت زیر خواهد بود.

<!-- HTML Code -->
<div class="div-class">
	This is main text.
</div>
/* CSS Code */
.div-class{
	line-height: 20px;
}
.div-class:before{
	content: 'This is before text.';
	display: block;
}
.div-class:after{
	content: 'This is after text.';
	display: block;
}

نتیجه در jsfiddle.01 [panel type='info' title='']خاصیت[tag] content[/tag] تنها بر روی شبه عناصر[tag] :before[/tag] و[tag] :after[/tag] اثر میگذارد و بر روی دیگر عناصر هیچ تاثیری ندارد. [/panel]همونطور که در تصویر بالا دیدید، متن شبه عناصر رو توسط خاصیت [tag]content[/tag] تعیین کردیم. خب حالا یه نگاهی هم به inspector مرورگرمون بندازیم:001 همونطور که دیدید متن شبه عناصر[tag] :before[/tag] و [tag]:after[/tag] توسط HTML دستکاری نمیشه و فقط میشه اونهارو توسط خاصیت [tag]content[/tag] تغییر داد. و اینکه متن شبه عناصر انتخاب(select) نمیشن.

مهم‌ترین نکته راجع به این دو شبه عناصر اینه که تا زمانی که خاصیت [tag] content[/tag] آنها مشخص نشده باشد، پنهان  هستند. اگر نمیخواهید در آنها متنی بنویسید پس مقدار [tag]content[/tag] آنهارا برابر دو کوتیشن باز و بسته قرار بدید. مقدار پیشفرص خاصیت [tag]content[/tag] برابر [tag]none[/tag] هست.

before-after-pseudo-elements

شاید بعضی جاها ببینید که از این دو شبه عنصر رو به صورت [tag]::before[/tag] و [tag]::after[/tag] استفاده کنند؛ [tag]:before[/tag] و [tag]:after[/tag] در ورژن دوم CSS،  و [tag]::before[/tag] و [tag]::after[/tag] در ورژن سوم وارد زبان CSS شدند.

نماد :: برای ایجاد تفاوت بین شبه کلاس ها([tag]:hover[/tag] , [tag]:active[/tag], [tag]:focus[/tag], [tag]:checked[/tag] , :first-child و …) و شبه عناصر([tag]::before[/tag], [tag]::after[/tag] , [tag]::first-line[/tag], [tag]::first-letter[/tag] و …) در ورژن سوم وارد CSS شد.

برای اینکه پشتیبانی مررورگرها از این دو شبه عنصر بیشتر بشه، معمولا از همون[tag] :before[/tag] و[tag] :after[/tag] استفاده میکنند.

حالا یه مثال کاربردی‌تر از این دو شبه عنصر:

<!-- HTML Code -->
	<div class="box">
		<h1>Lorem ipsum dolor</h1>
		<img src="http://s.7Learn.com/uploads/2014/08/compass-feature.png" />
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores magnam vitae labore eveniet ipsum odit.</p>
	</div>

 

/* CSS Code */
*,*:before,*:after{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font: normal 16px 'Raleway', Calibri, Tahoma, Arial, sans-serif;
	background-color: #e1e1e1;
}
.box{
	margin: 50px auto;
	width: 200px;
	height: 310px;
	padding-top: 5px;
	background-color: #fff;
	color: #7d7d7d;
	-webkit-box-shadow: 0 2px 2px #ccc;
	box-shadow: 0 2px 2px #ccc;
	line-height: 20px;
}
 .box h1{
	width: 220px;
	height: 36px;
	line-height: 36px;
	color: #eee;
	font-size: 1.25em;
	margin-bottom: 10px;
	text-align: center;
	background-color: #363636;
	-webkit-box-shadow: 0 1px 3px #363636;
	box-shadow: 0 1px 3px #363636;
	position: relative;
	right: 10px; /* 10px go to left */
} 
.box h1:before, .box h1:after{
	content: ''; /* for show ::before and ::after */;
	height: 0;
	width: 0;
	border-width: 5px;
	border-style: solid;
	border-color: transparent;
	position: absolute;
	top: 100%;
	z-index: -1;
}
.box h1:before{
	border-top-color: #252525;
	border-left-color: #252525;
	right: 0;
}
.box h1:after{
	border-top-color: #252525;
	border-right-color: #252525;
	left: 0;
}
.box img{
	display: block;
	margin: 5px auto;
}
.box p{
	margin: 5px 10px;
}


demoهمونطور که دمو رو دیدید گوشه‌های عنوان باکس رو توسط شبه عنصر [tag]:after[/tag] و [tag]:before[/tag] ایجاد کردیم و [tag]z-index[/tag] اونهارو برابر[tag] -1[/tag] قرار دادیم تا در در پشت باکس قرار بگیرند.

موفق باشید.

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۹ دیدگاه
Beh Naz ۳۰ مرداد ۱۳۹۷، ۱۳:۵۳
سلام
میشه در یک مورد بنده رو راهنمایی کنید:
یک منوی کشویی تصور کنید که در حالت موبایل وقتی روی یک آیتم بزنیم زیر منو باز میشه ، حالا من می خوام با زدن مجدد روی همون منو زیر منو بسته بشه. این کار رو هم فقط با css صرف می خوام انجام بدم، به نظرم باید از before و after استفاده کنم. آیا امکانش هست؟و اگر هست چطور؟
یک نکته بگم که وقتی برم روی آیتم بعدی، زیر منوی های آیتم قبلی بسته میشن، اما من میخوام اینکار رو با کلیک روی هر آیتم هم انجام بدم.(مثلا منوی سایت شما هم در حالت موبایل همچین ویژگی نداره)
milad salimi ۰۱ اردیبهشت ۱۳۹۶، ۱۵:۰۴
ممنون ولی موقعی ک استایل میدم میخوام بیارمش وسط منو با مشکل مواجع میشم
http://uupload.ir/files/nzf0_photo_2017-04-21_15-02-10.jpg
ببینید میخوام بیا وسط و فاصله هم داشته باشه
به a display: block; میدم اینطوری میشه
محمد اسفندیاری ۰۱ اردیبهشت ۱۳۹۶، ۲۳:۰۲
فایلتون رو زیپ کرده و آپلود کنید
milad salimi ۰۱ اردیبهشت ۱۳۹۶، ۰۳:۲۶
سلام من میخواستم منو درست کنم
مثلا
صفحه اول / دانلود موزیک/ و .../
/ اینو با افتر درست کردم ولی روی اخرین هم مییاد
مثلا اخریش میخوام این اضافه نشه /
ممنون میشم بگید
محمد اسفندیاری ۰۱ اردیبهشت ۱۳۹۶، ۱۰:۳۸
با سلام
این کد رو درون codepen نوشتم
https://codepen.io/Mesfandiari/project/editor/ZLzQpA
میتونین از این روش استفاده کنید. درون فایل style.css کدهای css رو ببینید
موفق باشید
hassani ۲۰ دی ۱۳۹۳، ۱۵:۳۴
ممنونم خیلی خوب بود
محمد اسفندیاری ۱۰ شهریور ۱۳۹۳، ۱۲:۲۵
با تشکر از شما دوست عزیز