كيفية إنشاء: خط فاصل نصي

كيفية إنشاء خط فاصل نصي م��س

الخطوة الأولى - إضافة HTML:

<div class="divider">Lorem Ipsum</div>

الخطوة الثانية - إضافة CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

جرب بنفسك

توضيح المثال:

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

أولاً، يجب عليك إضافة عنصر <div> يحتوي على اسم فئة "divider" في HTML، ووضع النص الذي تريد عرضه فيه (في هذا المثال، النص هو "Lorem Ipsum").

ثم، في CSS، قمت بتعيين .divider تم تعيين بعض الأسلوب للاصطفاء. قمت بتعيين حجم الخط إلى 30 بكسل، واستخدام تصميم flex، وتعيين align-items: center; لتجعل النص في وسط الخط الفاصل عموديًا.

ثم، استخدمت العناصر الوهمية ::before و ::after لإضافة زخرفة إلى جوانب الخط الفاصل. لقد تم تعيين هذين العناصر الوهميين flex: 1 لتجعلها تشغل .divider كل المساحة في العنصر باستثناء النص. لقد قمت أيضًا بتعيين content: '' لضمان أن هذين العناصر الوهمية فارغين وليس لديهم أي محتوى.

ثم، تعيين الهوامش الداخلية وألوان الخلفية والهوامش الخارجية لتعريف نمط الخط الفاصل. في هذا المثال، لون الخط الفاصل أحمر، ولديه بعض الهوامش الداخلية والخارجية.