بنام خدا سلام ,
درخدمت شما کابران عزیز هستم با یکی دیگه از آموزشهای وب سایت
پاسخ وردپرس با آموزش آموزش after:: و before:: در CSS
آموزش after:: و before:: در CSS
این دو انتخابگر از نوع pseudo element می باشند که در نگاه اول و در تعریف اولیه می توان گفت این امکان
را به ما می دهند تا از طریق CSS بتوانیم محتوا وارد صفحه کنیم بدون اینکه نیازی به انجام تغییری در HTML باشد.
در دنیای مرورگرها امروزه به جایی رسیده ایم که می توان از این دو عنصر در صورت نیاز استفاده کرد.
توجه داشته باشید که در مرورگرهای عزیز IE هم, از IE8 به بالا این دو عنصر پشتیبانی می شوند.
برای اطلاعات بیشتر در مورد پشتیبانی مرورگرها به این سایت سر بزنید.
وارد کردن محتوی از طریق CSS
نگاهی به گذشته در css2
|
1 2 3 4 5 |
/* CSS3 syntax */ ::after /* CSS2 syntax */ :after |
فرض کنید عنصری با کلاس element در HTML وجود دارد. کاربرد این عناصر در ساده ترین حالت به طریق زیر است.
کد HTML
|
1 2 3 |
<p class="boring-text">Here is some plain old boring text.</p> <p>Here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">Contributing to MDN is easy and fun.</p> |
کدCSS
|
1 2 3 4 5 6 7 8 9 |
.exciting-text::after { content: " <- EXCITING!"; color: green; } .boring-text::after { content: " <- BORING"; color: red; } |
نتیجه
یک مثال دیگه
ما می توانیم متن یا تصاویر را در contentاموال تقریبا به طریقی که می خواهیم، سبک کنیم.
کد HTML
|
1 |
<span class="ribbon">Look at the orange box after this text. </span> |
کدCSS
|
1 2 3 4 5 6 7 8 9 10 |
.ribbon { background-color: #5BC8F7; } .ribbon::after { content: "This is a fancy orange box."; background-color: #FFBA10; border-color: black; border-style: dotted; } |
نتیجه
راهنما
این مثال با استفاده ::after، در رابطه با attr()بیان CSS و یک data-descr ویژگی داده های سفارشی ، برای ایجاد راهنمای ابزار. هیچ جاوا اسکریپتی لازم نیست!
کد HTML
|
1 2 3 4 |
<p>Here we have some <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups that appear when hovering">tooltips</span>. </p> |
کدCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
span[data-descr] { position: relative; text-decoration: underline; color: #00F; cursor: help; } span[data-descr]:hover::after { content: attr(data-descr); position: absolute; left: ; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } |
نتیجه
: یا ::؟
همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط : را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.
|
1 2 3 4 |
div:after { content: 'Hoy!'; } |
توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.
توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.
خوب عزیزان این آموزش هم به پایان رسید امید وارم که مفید بوده باشه هر گونه سوال یا ابهام داشته باشید میتوانید از ما سوال خود را بپرسید از قسمت نظرات .
اگه این آموزش برای شما مفیدبود به دوستان خود توی شبکه های اجتماعی به اشتراک بزارید .
تایکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدارشما
دیدگاه کاربران