CSS Before و CSS بعد - كيفية استخدام خاصية المحتوى

و contentالملكية في CSS تحدد محتوى عنصر. كنت قد سمعت أن هذه الخاصية لا ينطبق إلا على ::beforeو ::afterالزائفة العناصر. في هذه المقالة ، سوف نستكشف حالات استخدام متنوعة contentللممتلكات ، بما في ذلك خارج العناصر الزائفة.

المتطلبات المسبقة

لأن غالبية حالات الاستخدام لل contentممتلكات تنطوي-عناصر الزائفة، وأود أن أقترح عليك أن تكون على دراية كيف ::beforeو ::after-عناصر الزائفة العمل. إليك مقالة رائعة لمساعدتك على التحديث:

  • العناصر الزائفة لـ CSS - قبل وبعد شرح المحددات

القيم المقبولة

أولاً ، دعنا نلقي نظرة على جميع القيم المقبولة contentللممتلكات.

  • normal: هذه هي القيمة الافتراضية. يحسب noneعند استخدامه مع العناصر الزائفة.
  • none: لن يتم إنشاء عنصر زائف.
  • : يضبط المحتوى على السلسلة المحددة. يمكن أن تحتوي هذه السلسلة على تسلسلات هروب Unicode. على سبيل المثال، رمز حقوق النشر: \\000A9.
  • : يضبط المحتوى على صورة أو تدرج باستخدام url()أو linear-gradient().
  • open-quote| close-quote: يضبط المحتوى على حرف الاقتباس المناسب المشار إليه من quotesالخاصية.
  • no-open-quote| no-close-quote: يزيل عرض أسعار من العنصر المحدد ، ولكن لا يزال يزيد أو ينقص مستوى التداخل المشار إليه من quotesالخاصية.
  • attr(*attribute*): يضبط المحتوى على أنه قيمة السلسلة للعناصر المحددة السمة المحددة.
  • counter(): يضبط المحتوى على أنه قيمة a counter، عادةً رقم.

خيط

أحد أكثر الأمثلة الأساسية هو استخدام إضافة محتوى سلسلة قبل أو بعد عنصر. في هذا المثال ، سنضيف رمز ارتباط قبل ارتباط ونضيف عنوان URL للرابط بعده.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

لاحظ المسافة بعد حرف Unicode في ::beforeالعنصر الزائف وقبل القوس الأول في ::afterالعنصر الزائف. سيؤدي هذا إلى إنشاء مساحة بين هذه والعنصر الأصل.

بدلاً من ذلك ، يمكنك إضافة paddingأو marginإلى العناصر الزائفة لإضافة الفصل.

اقتباسات أساسية

باستخدام contentالخاصية ، يمكنك إضافة علامات الاقتباس قبل و / أو بعد العناصر. الآن ، في HTML لدينا العلامة. سيؤدي هذا أيضًا إلى إضافة اقتباسات حول محتواها. ومع ذلك ، مع contentالخاصية ، يمكننا التحكم بشكل أكبر في التنفيذ.

فيما يلي المثال الأساسي لإضافة علامات الاقتباس:

يمكنك تحقيق ذلك أيضًا باستخدام علامة HTML . لكن ربما نريد تصميم الاقتباس بشكل مختلف. لذلك دعونا نضيف فقط اقتباس الافتتاح وليس الاقتباس الختامي. ودعنا أيضًا نصمم اقتباس الافتتاح.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

النتائج:

صورة تعرض اقتباس مفرد في أعلى يسار الفقرة

اقتباسات متقدمة

يمكننا أيضًا تحديد الأماكن التي لا نريد فيها اقتباسات. على سبيل المثال ، قد تقتبس من شخص ما يقتبس من كلام شخص آخر. لذلك سيكون لديك اقتباسات داخل الاقتباسات ، والتي يمكن أن تكون مربكة للقارئ.

في CodePen أدناه ، نستخدم علامات HTML ، ثم نحدد العلامات التي يجب ألا تعرض علامات الاقتباس.

للوهلة الأولى ، قد تعتقد أنه يجب علينا إزالة العلامة عند الحاجة. ولكن من خلال تحديد المكان الذي لا ينبغي أن يظل فيه عرض الأسعار يزيد أو ينقص مستوى التداخل المشار إليه من quotesالخاصية.

لشرح ذلك ، نحتاج إلى فهم quotesالخاصية. هذه ببساطة "مصفوفة" من الأحرف التي يجب استخدامها عند الاقتباس. هنا مثال:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

هذه مجموعات من الاقتباسات. سيتم استخدام المجموعة الأولى للمستوى الأعلى من عروض الأسعار. سيتم استخدام المجموعة الثانية لأول اقتباس متداخل. وستُستخدم المجموعة الثالثة للاقتباس الثاني المتداخل. وهكذا ، إذا كان هناك المزيد من المجموعات المدرجة.

الآن أن نفهم quotesالملكية، وأنا يمكن أن تفسر كيف no-open-quoteو no-close-quoteخصائص العمل.

لكل مستوى من علامات الاقتباس ، يمكننا تعيين مجموعات مختلفة من الأحرف لاستخدامها في علامات الاقتباس. من خلال تحديد المكان الذي يجب ألا يظل فيه عرض الأسعار ، يزيد أو ينقص مستوى التداخل المشار إليه من quotesالخاصية.

ألق نظرة على المثال أدناه. سترى أنه تم تخطي المستوى الثاني من عروض الأسعار.

السمات

يمكن استخدام السمات لتمرير المحتوى من HTML إلى contentخاصية CSS . لقد استخدمنا هذا بالفعل في مثال الرابط حيث استخدمنا hrefالسمة لتضمين سلسلة عنوان URL كجزء من المحتوى الخاص بنا.

حالة الاستخدام المثالية لهذا هي تلميح الأدوات. يمكنك إضافة titleسمة إلى عنصر في HTML للحصول على تلميح أداة بسيط ومضمّن عند التمرير. ولكن لتخصيص هذا ، يمكننا استخدام سمة بيانات في علامة HTML الخاصة بنا ثم استخدام contentالخاصية لإضافة تلميح أداة.

في هذا المثال ، نستخدم السمة data-tooltipمن عنصر HTML الخاص بنا لتمرير القيمة إلى تلميح الأدوات الخاص بنا. بالنسبة لمؤشر تلميح الأداة ، قمنا بتعيين القيمة contentإلى ""، كما contentهو مطلوب لتقديم عنصر ::beforeأو ::afterعنصر زائف.

عدادات

و counter()ظيفة CSS بإرجاع سلسلة تمثل القيمة الحالية لمكافحة مسمى. في المثال التالي لدينا قائمة مرتبة سنضيف محتوى باستخدام ملف counter.


    
    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    دون التعمق في counterالوظيفة ، يتعين علينا أولاً بدء العداد على olالعنصر. يمكننا تسمية هذا ما نود. ثم نخبر العداد بالزيادة في كل liعنصر. وأخيرًا ، قمنا بتعيين contentملف li::after.

    ها هي النتيجة:

    قائمة مرتبة

    يمكنك استخدام هذا لتخصيص المحتوى داخل كل عنصر قائمة يحتاج إلى رقم مطابق. أو يمكنك استخدام هذا لتخصيص عنصر القائمة نفسه. على سبيل المثال ، يمكنك إزالة الترقيم الافتراضي وتنفيذ نظام ترقيم مخصص.

    الصور

    يمكن استخدام الصور والتدرجات مع contentالخاصية. هذا واضح إلى حد ما. فيما يلي مثال يستخدم كلاهما:

    لإمكانية الوصول ، يوجد أيضًا خيار لإضافة نص بديل للصورة. هذه الميزة غير مدعومة بالكامل.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    ملاحظة: هذا غير مدعوم في Firefox و IE و Safari. أيضًا ، لا يعمل التدرج اللوني في Firefox.

    خارج العناصر الزائفة

    صحيح! يمكنك استخدام contentالخاصية خارج العناصر الزائفة ::beforeو ::after. على الرغم من أن استخدامه محدود وغير متوافق تمامًا في جميع المتصفحات.

    ستكون حالة الاستخدام الأكثر توافقًا هي استبدال عنصر.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    ملاحظة: الاستبدال غير مدعوم في IE.

    استنتاج

    في معظم الأوقات سترى content: ""موجودة في العناصر الزائفة ::beforeو ::after. لكن contentالخاصية لها العديد من التطبيقات المفيدة.

    أفضل استخدام في رأيي هو استخدامه لتحديث العناصر المجمعة. إذا كنت تريد إضافة رمز قبل كل رابط على موقعك ، فسيكون من الأسهل إضافته من خلال contentالخاصية بدلاً من إضافته إلى كل عنصر في مستند HTML.

    شكرا للقراءة!

    شكرا لكم على قراءة هذا المقال. نأمل أن يكون قد ساعدك على فهم كيفية عمل contentالخاصية بشكل أفضل في CSS.

    جيسي هول (codeSTACKr)أنا جيسي من تكساس. تحقق من المحتوى الآخر الخاص بي واسمحوا لي أن أعرف كيف يمكنني مساعدتك في رحلتك لتصبح مطور ويب.

    • اشترك في بلدي يوتيوب
    • قل مرحبا! انستغرام | تويتر
    • اشترك في رسالتي الإخبارية