آموزش after:: و before:: در CSS جلسه 26 پاسخ وردپرس

آموزش قبلی

آموزش ساخت منوی آبشاری در html و css قسمت دوم

آموزش بعدی

آموزش border-radius در css پاسخ وردپرس

آموزش after:: و before:: در CSS

فهرست موضوعات در این آموزش

بنام خدا سلام ,

درخدمت شما کابران عزیز هستم با یکی دیگه از آموزشهای وب سایت
پاسخ وردپرس با آموزش آموزش after:: و before:: در CSS

آموزش after:: و before:: در CSS

این دو انتخابگر از نوع pseudo element می باشند که در نگاه اول و در تعریف اولیه می توان گفت این امکان
را به ما می دهند تا از طریق CSS بتوانیم محتوا وارد صفحه کنیم بدون اینکه نیازی به انجام تغییری در HTML باشد.

در دنیای مرورگرها امروزه به جایی رسیده ایم که می توان از این دو عنصر در صورت نیاز استفاده کرد.
توجه داشته باشید که در مرورگرهای عزیز IE هم, از IE8 به بالا این دو عنصر پشتیبانی می شوند.
برای اطلاعات بیشتر در مورد پشتیبانی مرورگرها به این سایت سر بزنید.

وارد کردن محتوی از طریق CSS

نگاهی به گذشته در css2

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

/* CSS3 syntax */

::after

/* CSS2 syntax */

:after

فرض کنید عنصری با کلاس element در HTML وجود دارد. کاربرد این عناصر در ساده ترین حالت به طریق زیر است.

آموزش display در CSS

این آموزش را از دست نده :

کد HTML

<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>

Here is some plain old boring text.

Here is some normal text that is neither boring nor exciting.

Contributing to MDN is easy and fun.

کدCSS

.exciting-text::after {
  content: " <- EXCITING!"; 
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

.exciting-text::after {

content: " <- EXCITING!";

color: green;

}

.boring-text::after {

content: " <- BORING";

color: red;

}

نتیجه

یک مثال دیگه

ما می توانیم متن یا تصاویر را در contentاموال تقریبا به طریقی که می خواهیم، سبک کنیم.

کد HTML

<span class="ribbon">Look at the orange box after this text. </span>

1	<span class="ribbon">Look at the orange box after this text. </span>

کدCSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

.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 و css قسمت اول

این آموزش را از دست نده :

کد HTML

<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>

Here we have some

text with a few

tooltips.

کدCSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  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;
}

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 فقط : را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.

خواص یا صفات المان های HTML جلسه 4

این آموزش را از دست نده :

div:after
{
  content: 'Hoy!';
}

div:after

{

content: 'Hoy!';

}

توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.

توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.

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

اگه این آموزش برای شما مفیدبود به دوستان خود توی شبکه های اجتماعی به اشتراک بزارید .
تایکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدارشما

میانگین رتبه 3.8/5 تعداد رای : 9

اشتراک‌ گذاری

با استفاده از روش‌های زیر می‌توانید این صفحه را با دوستان خود به اشتراک بگذارید.

دوره های پیشنهادی

مدرس : زمان الله ابراهیمی

همه دوره ها

انصراف

namvar 2022/10/06

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

پاسخ

زمان الله ابراهیمی 2022/10/06

سلام خدمت شما دوست گرامی به احتمال زیاد از vertical align استفاده کنید مشکل شما برطرف میشه
موفق و سربلند باشید

مجتبی 2021/27/10

سلام، فقط خواستم تشکر کنم، نکاتی که مطرح کردید خیلی عالی بود، مخصوصا دو مورد که کاربرد این رو مثال زدید که مثلا برای راحتی کاربر سایت که می‌خواهد رمز عبور رو انتخاب کند – خیلی عالی بود – با آرزوی سلامتی و موفقیت برای شما

زمان الله ابراهیمی 2021/27/10

سلام و دورود خدمت شما مجتبی عزیز خیلی خوشحالم که برای شما دوست گرامی این آموزش مفید بود و کامل تشکر را دارم بابت ارسال نظر شما که کلی انرژی برای بنده انتقال داده امید وارم که همیشه سر بلند باشید

آخرین بروزرسانی:	21 فوریه 2022
دسته‌بندی اصلی	آموزش HTML5 و CSS3 آموزش css
بازدید	2,847
	۴ دیدگاه