3.7 KiB
| title | localeTitle |
|---|---|
| Before Selector | قبل المختار |
قبل المختار
يمكن استخدام CSS :: before selector لإدراج أي شيء قبل المحتوى لعنصر أو عناصر. يسمح للمصممين بتنفيذ أي تصميم css قبل المحتوى في عنصر. يتم استخدامه من خلال إرفاق :: قبل العنصر الذي سيتم استخدامه عليه.
لنلق نظرة على بعض الأمثلة:
`p::before { content: ""; border: solid 5px #ccc }
span.comment::before{ content: "Comment: "; color: blue; } `
`
To infinity and beyond
I am buz lightyear, I come in peace.
May the force be with you
Do. Or do not. There is no try
`
في المثال أعلاه ، سنقوم بترقيم حدود رمادية قبل كل عنصر فقرة في الصفحة ، ونحن نقوم أيضًا بإضافة كلمة "تعليق" باللون الأزرق قبل كل عنصر في الامتداد مع تعليق الفصل.
يمكنك الاطلاع على هذا العرض التوضيحي هنا https://jsfiddle.net/398by400/
التعريف والاستخدام
::before واحد من محددات CSS pseudo-elements ، والتي تستخدم لتصميم أجزاء محددة من عنصر. في هذه الحالة ، يمكننا إدراج المحتوى قبل بعض عناصر HTML من CSS. على الرغم من أننا سنرى المحتوى في الصفحة ، إلا أنه ليس جزءًا من DOM ، ما يعني أنه لا يمكننا التلاعب به من Javascript. حيلة واحدة لحل هذا العائق: تمرير المحتوى باستخدام سمة بيانات واستخدام jQuery للتلاعب به. هذا مثال على الاستخدام:
p::before { content: "Hello "; }
`
world!!
`هذا سيظهر Hello world!! في الصفحة.
لا يمكن فقط إدراج السلاسل أو الصور أو العدادات أو حتى أي شيء ("" ، مفيدة لـ clearfix) في attibute content ، ولكن ليس HTML . هناك عدد كبير من الأشياء الرائعة التي يمكن إجراؤها باستخدام ::before after بطريقة إبداعية. يمكنك إلقاء نظرة على الرابط التالي إذا كنت تشعر بالفضول: مجموعة كاملة من الأشياء المدهشة يمكن أن تقوم بها عناصر الزائفة
وحيد القولون مقابل نقرا مزدوجا
هناك القليل من النقاش حول الطريقة الصحيحة لاستخدام العناصر الزائفة: النقطتين المفصليتين القديمتين ( :before ) ، المستخدمتين في مواصفات CSS 1 و 2 ، مقابل إعادة التوصية CSS3 ، النقطتين المزدوجتين ( ::before ) ، بشكل أساسي إلى "إنشاء التمييز بين الطبقات الزائفة والعناصر الزائفة " . ولكن لأسباب التوافق ، لا يزال يتم قبول القولون المفرد. يتحدث عن التوافق ، يدعم IE8 تدوين القولون المفرد فقط.
معلومات اكثر:
CSS-Tricks :: after / :: before
تحديد ومعالجة عناصر زائفة CSS مثل :: before و :: after jQuery