--- title: Before Selector localeTitle: قبل المختار --- ## قبل المختار يمكن استخدام 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 youworld!!
` هذا سيظهر `Hello world!!` في الصفحة. لا يمكن فقط إدراج السلاسل أو الصور أو العدادات أو حتى أي شيء ("" ، مفيدة لـ clearfix) في attibute `content` ، ولكن **ليس HTML** . هناك عدد كبير من الأشياء الرائعة التي يمكن إجراؤها باستخدام `::before` `after` بطريقة إبداعية. يمكنك إلقاء نظرة على الرابط التالي إذا كنت تشعر بالفضول: [مجموعة كاملة من الأشياء المدهشة يمكن أن تقوم بها عناصر الزائفة](https://www.w3schools.com/css/css_pseudo_elements.asp) #### وحيد القولون مقابل نقرا مزدوجا هناك القليل من النقاش حول الطريقة الصحيحة لاستخدام العناصر الزائفة: النقطتين المفصليتين القديمتين ( `:before` ) ، المستخدمتين في مواصفات CSS 1 و 2 ، مقابل إعادة التوصية CSS3 ، النقطتين المزدوجتين ( `::before` ) ، بشكل أساسي إلى _"إنشاء التمييز بين الطبقات الزائفة والعناصر الزائفة "_ . ولكن لأسباب التوافق ، لا يزال يتم قبول القولون المفرد. يتحدث عن التوافق ، يدعم IE8 تدوين القولون المفرد فقط. #### معلومات اكثر: [W3Schools CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp) [CSS-Tricks :: after / :: before](https://css-tricks.com/almanac/selectors/a/after-and-before/) [تحديد ومعالجة عناصر زائفة CSS مثل :: before و :: after jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin)