الفرق بين المراجعتين لصفحة: «CSS/::before»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
سطر 79: | سطر 79: | ||
* مواصفة [https://drafts.csswg.org/selectors-3/#gen-content Selectors Level 3]. | * مواصفة [https://drafts.csswg.org/selectors-3/#gen-content Selectors Level 3]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/generate.html#before-after-content CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/generate.html#before-after-content CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Selectors]] | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS pseudo-element]] | [[تصنيف:CSS pseudo-element|{{SUBPAGENAME}}]] |
مراجعة 15:38، 28 يناير 2018
العنصر الزائف ::before
في CSS (أي pseudo-element) هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content
، وهو عنصرٌ سطريٌ افتراضيًا.
a::before {
content: "♥";
}
الشكل العام لهذا المحدد:
::before
:before
لاحظ أنَّ CSS3 أضافت الشكل ::before
(لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل :before
المُضاف في CSS2 أيضًا.
العناصر الزائفة الموّلدة من ::after
و ::before
ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما على العناصر المُستبدَلة مثل <img>
أو <br>
.
أمثلة
مثال بسيط عن العنصر الزائف ::before
لإضافة علامات اقتباس، لاحظ أننا استخدمنا العنصرين ::before
و ::after
لإضافة علامات الاقتباس قبل وبعد العنصر <q>
:
<q>Some quotes,</q> he said, <q>are better than none.</q>
شيفرة CSS:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content
كما نشاء:
<span class="ribbon">Notice where the orange box is.</span>
شيفرة CSS:
.ribbon {
background-color: #5BC8F7;
}
.ribbon::before {
content: "Look at this orange box.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي (:after) | مدعومة | مدعومة | 8.0 | 4.0 | 4.0 |
الدعم الأساسي (::after) | مدعومة | مدعومة | 9.0 | 7.0 | 4.0 |
دعم الحركات والانتقالات | 26.0 | 4.0 | غير مدعومة | غير مدعومة | غير مدعومة |
على النقيض من متصفح IE، يدعم متصفح Edge الحركات والانتقالات مع هذا العنصر الزائف.
مصادر ومواصفات
- مسودة CSS Pseudo-Elements Level 4.
- مسودة CSS Transitions.
- مسودة CSS Animations.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).