خط تحت الصورة الرمزية؟

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

مرحباً يا paranoya!

(رابط مثال لـ sigma كمرجع: https://forum.figma.com/t/introduce-yourself/102/2)

إنها بالفعل تخصيصات لطيفة.

يمكنك رؤية كيف يفعلون ذلك باستخدام هذا الدليل:

سيساعدك هذا في إجراء العديد من التخصيصات المرئية على منتداك.

في Figma، يمكننا استهداف عنصر السطر هكذا:

لقد أضافوا هذا إلى CSS الخاص بالمظهر الخاص بهم:

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

ولكن يجب تعديل بعض القيم لتبدو أفضل على منتداك الخاص.

يبدو خطهم العمودي رائعًا لأنهم تخلصوا أيضًا من الخط الأفقي بين كل مشاركة.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

مع القليل من التعديل، يمكنك تحقيق شيء كهذا:

لم أتوقع الحصول على إجابة بهذه السرعة. شكراً جزيلاً!

على الرحب والسعة، نحن هنا للمساعدة! :hugs: