چگونه ایجاد می‌شود: خط تقسیم متنی

چگونه یک خط تقسیم متنی پاسخگو ایجاد کنید

مرحله اول - اضافه کردن 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: '' برای اطمینان از اینکه این دو عناصر فرضی خالی هستند و شامل هیچ محتوایی نمی‌شوند.

بعد، داخلی پرکن، رنگ پس‌زمینه و حاشیه بیرونی تنظیم می‌کنید تا سبک خط تقسیم را تعریف کنید. در این مثال، رنگ خط تقسیم قرمز است و دارای برخی حاشیه داخلی و بیرونی است.