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

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

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

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