اذهب إلى المحتوى
  • 0

ما هي افضل طريقة لإضافة نص أو عنصر داخل عنصر آخر باستخدام CSS فقط ؟

Muhannad Bahurmoz

السؤال

السلام عليكم ورحمة الله وبركاته,

أريد إضافة نص أو عنصر بداخل عنصر div فارغ وبحسب علمي يمكنني فعلها باستخدام ال Pseudo Elements (before أو after),

فهل توجد طرق أخرى أو طريقة أفضل منهم لفعلها ؟

وشكرًا لكم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك استخدام JavaScript لإضافة عناصر جديدة أو نصوص إلى عنصر `div فارغ باستخدام DOM Manipulation، حيث يمكنك استخدام innerHTML أو appendChild أو insertBefore، وغيرها لإضافة محتوى.

أو يمكنك حتى استخدام خاصية content مع الـ Pseudo Elements و يمكنك أن تطلع أكثر على الموضوع من خلال هذه المقالات:

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

 استخدام Pseudo Elements (before أو after) كما ذكرت وبطبع هناك طرق أخرى متاحة أيضًا مثالًا يمكنك استخدام الـ Pseudo Element وايضا يمكنك استخدام JavaScript لتحقيق ذلك.

سنعطي مثال اولا عن طريقة استخدام Pseudo Elements سنستخدم الـ Pseudo Element ::before لإضافة نص داخل العنصر <div>:
 

<div class="my-div"></div>

css

.my-div::before {
  content: "النص المراد إضافته";
}

ام الطريقه الثانيه هي باستخدام JavaScript

<div id="my-div"></div>

JavaScript

var divElement = document.getElementById("my-div");
var spanElement = document.createElement("span");
spanElement.textContent = "النص المراد إضافته";
divElement.appendChild(spanElement);

يمكنك ايضا قرات هذه المقال لللتعمق اكثر

https://academy.hsoub.com/programming/css/تحريك-شبه-العناصر-pseudo-elements-في-css-r145/

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك استعمال المحددات الزائفة الأخرى أيضا، ونذكر: 

  • ::selection
  • ::first-letter
  • ::first-line
  • ::marker

بجانب أنه يمكنك القيام بالعملية بشكل قياسي، ضف العنصر ضمن هيكلة HTML وليكن div آخر أو غيره، ثم قم بتنسيقه باستخدام CSS بشكل عادي. سوف يعطيك ذاك تحكما أكبر في الهيكلة وفي الكود.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...