چگونه ایجاد می‌کنیم: خط جداکننده متن

چگونه یک خط جداکننده متن واکنش‌پذیر ایجاد می‌کنیم

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

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