فائدة before و after في الـ css

كتب يوم : 17 يونيو 2013 - تصنيف : تصميم مواقع انترنت - مشاهدات 927

before_and_after_CSS_hasangad-main

السلام علكيم زوار مدونتي الكرام … أدون اليوم عن بعض عناصر السي اس اس CSS وهما before و after

before و after يقومان بإضافة بعض الحروف أو الصور أو الكلمات أو حتى التأثيرات قبل أو بعد العنصر

ولأوضح المعني أكثر …. لنفترض أن لديك جملة ولتكن

تصميم وتطوير قوالب الوورد بريس

وتريد أن تضع قبلها قوس مفتوح وبعدها قوس مقفول لتبدو كذلك

( تصميم وتطوير قوالب الوورد بريس )

كيف ذلك ؟ فلنجرب معاً الأكواد التالية ، قم بكتابة النص بالأعلي بين وسميَ <p></p>

جرب معي إضافة الأكواد التالية في ملف ال css أو بين وسميَ الهيد

كما لا حظت أننا قمنا بتخصيص before/after للعنصر p

الخاصية المسؤولة عن إضافة الأقواس هي content ، يمكنك أن تغيرها بأي حرف أو نص تريد … جربها بنفسك 🙂

والسؤال الآن ؟ هل هذا هو كل شيء ؟

تابع معي … لنفترض ان لديك ملف pdf وتريد وضع أيقونة ملفات الـ pdf قبل الرابط … عنصر before يساعدك في عمل ذلك

اكتب الكود التالي في صفحتك بين وسميَ الـ <body></body>

والآن أرفق الكود التالي في ملف ال css أو بين وسمي الهيد

شرح الكود بالأعلى:

هذا الكود يقوم باختيار كل الروابط التي تحتوي ملفات كتب اليكترونية pdf

يمكنك تغيير pdf إلى أي صيغة تريد اختيارها مثل أنواع الصور والفيديو والصوتيات والفلاش jpg , png , mp3 , flv , mp4 .. .الخ

هذه الخاصية المسؤولة عن إدراج الأيقونة الخاصة بملفات ال pdf

أتمنى أن يكون الشرح بسيطاً ^_^

إضافة أخيرة أحب أن أذكرها لعلها تفيدك

افترض عي أن لديك رابط يحمل الآي دي google

وتريد تخصيص أيقونة جوجل له

الكود التالي يفيد في ذلك

الكود

هو المنوط باختيار الرابط المرتبط بالآدي دي id = google

لمشاهدة نموذج على الشرح إضغط هنا

لتحميل نموذج الشرح إضغط هنا

ملحوظة : نموذج الشرح يحتوي على أكواد إضافية أتمنى أن تفيدك 🙂

أعجبتك التدوينة ؟ أترك تعليق 🙂

وسوم :

:after :before CSS html
  • مها

    معلومة جديدة
    جزاك الله خيرا

  • منير حامد منير مصطفى

    جزاك الله خيرا
    على المعلومات القيمه

    • وإياك أخي منير .. شكراً لمرورك 🙂

  • بارك الله فيك أستاذ حسن ونفع الغير بعلمك … وللأمام دائماً إن شاء الله .

    • جزاك الله خيراً أستاذي الغالي … اللهم آمين 🙂