الفرق بين المراجعتين ل"CSS/::after"

المراجعة الحالية بتاريخ 19:56، 24 أكتوبر 2018

العنصر الزائف ‎::after‎ في CSS (أي pseudo-element) هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.

a::after {
  content: "→";
}

الشكل العام لهذا المحدد:

::after
:after

لاحظ أنَّ CSS3 أضافت الشكل ‎::after‎ (لاحظ أنَّ قبله زوجين من النقط الرأسية) لتمييز العناصر الزائفة (pseudo-elements) عن الأصناف الزائفة (pseudo-classes)؛ لكن المتصفحات تقبل الشكل ‎:after‎ المُضاف في CSS2 أيضًا.

العناصر الزائفة الموّلدة من ‎::after‎ و ‎::before ستكون محتواة داخل صندوق العنصر، وبالتالي لا يمكن تطبيقهما على العناصر المُستبدَلة مثل <img> أو <br>.

أمثلة

مثال عن استخدام هذا العنصر الزائف لإنشاء إشارة إلى العناصر في نهايتها:

<p class="boring-text">هنا بعض الكلام القديم الممل </p>
<p>هنا بعض النصوص العادية التي ليست مملة ولا مثير</p>
<p class="exciting-text">هنا بعض النصوص المثيرة</p>

شيفرة CSS:

.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

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

لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية content كما نشاء:

<span class="ribbon">لاحظ أين المربع البرتقالي</span>

شيفرة CSS:

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

.ribbon::after {
  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 الحركات والانتقالات مع هذا العنصر الزائف.

انظر أيضًا

صفحة الصنف الزائف before:: الذي يُمثِّل أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
صفحة الخاصية content التي تُستخدَم مع العنصرين الزائفين ‎::before و ‎::after لتوليد محتوى في العنصر.

مصادر ومواصفات

مسودة CSS Pseudo-Elements Level 4.
مسودة CSS Transitions.
مسودة CSS Animations.
مواصفة Selectors Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 13: / سطر 13: @@
 == أمثلة ==
 مثال عن استخدام هذا العنصر الزائف لإنشاء إشارة إلى العناصر في نهايتها:<syntaxhighlight lang="html">
-<p class="boring-text">Here is some plain old boring text.</p>
+<p class="boring-text">هنا بعض الكلام القديم الممل </p>
-<p>Here is some normal text that is neither boring nor exciting.</p>
+<p>هنا بعض النصوص العادية التي ليست مملة ولا مثير</p>
-<p class="exciting-text">Here is some exciting text.</p>
+<p class="exciting-text">هنا بعض النصوص المثيرة</p>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 28: / سطر 28: @@
 }
 </syntaxhighlight>لاحظ كيف يمكننا تنسيق النصوص والصور المُضافة عبر الخاصية <code>[[CSS/content|content]]</code> كما نشاء:<syntaxhighlight lang="html">
-<span class="ribbon">Notice where the orange box is.</span>
+<span class="ribbon">لاحظ أين المربع البرتقالي</span>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 75: / سطر 75: @@
 على النقيض من متصفح IE، يدعم متصفح Edge الحركات والانتقالات مع هذا العنصر الزائف.
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/::before|before::]]</code> الذي يُمثِّل أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية <code>[[CSS/content|content]]</code>، وهو عنصرٌ سطريٌ افتراضيًا.
+* صفحة الخاصية <code>[[CSS/content|content]]</code> التي تُستخدَم مع العنصرين الزائفين <code>[[CSS/::before|‎::before]]</code> و <code>[[CSS/::after|‎::after]]</code> لتوليد محتوى في العنصر.
+== مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-pseudo-4/#selectordef-after CSS Pseudo-Elements Level 4].
 * مسودة [https://drafts.csswg.org/css-transitions/#animatable-properties CSS Transitions].
@@ سطر 81: / سطر 85: @@
 * مواصفة [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)‎].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Selectors]]
+[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
-[[تصنيف:CSS pseudo-element]]
+[[تصنيف:CSS pseudo-element|{{SUBPAGENAME}}]]