تخصيص محتوى بعنصر after باستخدام CSS وJavaScript

النمط الذي تحاول إنشاؤه ممكن بشكل أساسي باستخدام محددات الترتيب في CSS. ومع ذلك، هناك بعض الاعتبارات التي يجب مراعاتها:

1. لا يمكن استخدام + مع محددات ترتيب: الرمز + يستخدم لتحديد العناصر الأخوية المتتالية. في حالتك، .user:after و .bot ليستا عناصرًا أخوية متتالية، بل هناك عنصر آخر (الرسالة) بينهما.
2. تحديث نص بعد عنصر معين بناءً على حالة أخرى: في هذه الحالة، يمكنك استخدام نموذج بسيط باستخدام جافا سكربت لتحقيق النتيجة المرجوة. على سبيل المثال:

htmlCopy code
<div class="message user">User: Hello!div>
<div class="message bot">Bot: Hi there!div>

<style>
    .message.user:after {
        content: ": ";
    }
    .message.bot:after {
        content: "=> ";
    }
style>

<script>
    document.querySelectorAll('.message').forEach(function(element) {
        if (element.classList.contains('user')) {
            element.setAttribute('data-after-content', ': ');
        } else if (element.classList.contains('bot')) {
            element.setAttribute('data-after-content', '=> ');
        }
    });

    document.querySelectorAll('.message').forEach(function(element) {
        var afterContent = element.getAttribute('data-after-content');
        if (afterContent) {
            var afterElement = document.createElement('span');
            afterElement.classList.add('after-content');
            afterElement.textContent = afterContent;
            element.appendChild(afterElement);
        }
    });
script>

في هذا السياق، يتم تحديد النص الذي يتم إضافته بعد الرسائل الخاصة بالمستخدم والروبوت باستخدام السمة data-after-content وإضافته بواسطة جافا سكربت.

يرجى ملاحظة أن هذا هو مثال بسيط للغاية وأنه من المحتمل أن تحتاج إلى ضبطه بناءً على هيكل صفحتك واحتياجات التصميم الخاصة بك.

بالطبع! لتحقيق الهدف الذي وضعته، يمكنك استخدام خاصية data- لتخزين المحتوى الإضافي الذي ترغب في إضافته بعد عنصر معين، ثم استخدام جافا سكربت لإنشاء عنصر فرعي (span على سبيل المثال) يحتوي على هذا المحتوى وإضافته إلى نهاية العنصر المعني.

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

هنا مثال على كيفية تحقيق ذلك:

htmlCopy code
<div class="message user">User: Hello!div>
<div class="message bot">Bot: Hi there!div>

<style>
    .message:after {
        content: attr(data-after-content);
    }
    .message.user {
        --after-content: ": ";
    }
    .message.bot {
        --after-content: "=> ";
    }
style>

<script>
    document.querySelectorAll('.message').forEach(function(element) {
        var afterContent = window.getComputedStyle(element).getPropertyValue('--after-content');
        element.setAttribute('data-after-content', afterContent);
    });
script>

في هذا المثال، تم استخدام متغيرات CSS المخصصة (--after-content) لتحديد المحتوى الإضافي المراد إضافته. ثم يتم استخدام جافا سكربت لتعيين قيمة هذه المتغيرات بناءً على الكلاسات (user أو bot) التي تم تطبيقها على العناصر .message.

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