الفرق بين المراجعتين ل"CSS/::before"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 13: | سطر 13: | ||
== أمثلة == | == أمثلة == | ||
مثال بسيط عن العنصر الزائف <code>::before</code> لإضافة علامات اقتباس، لاحظ أننا استخدمنا العنصرين <code>::before</code> و <code>[[CSS/::after|::after]]</code> لإضافة علامات الاقتباس قبل وبعد العنصر <code>[[HTML/q|<nowiki><q></nowiki>]]</code>:<syntaxhighlight lang="html"> | مثال بسيط عن العنصر الزائف <code>::before</code> لإضافة علامات اقتباس، لاحظ أننا استخدمنا العنصرين <code>::before</code> و <code>[[CSS/::after|::after]]</code> لإضافة علامات الاقتباس قبل وبعد العنصر <code>[[HTML/q|<nowiki><q></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
| − | <q> | + | <q> بعض الاقتباسات ، </q> قال ، <q> أفضل من لا شيء. </q> |
| − | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
q::before { | q::before { | ||
| سطر 25: | سطر 24: | ||
} | } | ||
</syntaxhighlight>لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية <code>[[CSS/content|content]]</code> كما نشاء:<syntaxhighlight lang="html"> | </syntaxhighlight>لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية <code>[[CSS/content|content]]</code> كما نشاء:<syntaxhighlight lang="html"> | ||
| − | <span class="ribbon"> | + | <span class="ribbon">لاحظ أين المربع البرتقالي</span> |
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
مراجعة 10:24، 11 أكتوبر 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> بعض الاقتباسات ، </q> قال ، <q> أفضل من لا شيء. </q>
شيفرة CSS:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content كما نشاء:
<span class="ribbon">لاحظ أين المربع البرتقالي</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).