คำแนะนำหลักสูตร:

AND

วิธีการสร้างช่องแบ่งข้อความที่สามารถปรับเปลี่ยนได้

ขั้นที่ 1 - เพิ่ม HTML:

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

ขั้นที่ 2 - เพิ่ม CSS:
  .divider {
  font-size: 30px;
  class ได้ตั้งค่ารูปแบบบางอย่าง คุณตั้งค่าขนาดตัวอักษรเป็น 30 พิกเซล ใช้ flex layout และตั้งค่า
margin: 5px;
display: flex;
  .divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
margin: 5px;

}

ลองทดลองด้วยตัวเอง

ตัวอย่างที่เรียกใช้:

ตัวอย่างนี้เผยแพร่วิธีการใช้ CSS ที่สร้างช่องแบ่งข้อความ โดยเฉพาะอย่างยิ่ง มันใช้การรวมกันของ HTML และ CSS ที่สร้างผลลัพธ์นี้

ในตอนแรก คุณต้องเพิ่มองค์ประกอบ <div> ที่มีชื่อคลาส "divider" และใส่ข้อความที่คุณต้องการแสดง (ในตัวอย่างนี้ ข้อความคือ "Lorem Ipsum") .divider เพื่อนั้น ใน CSS คุณตั้งค่า class ได้ตั้งค่ารูปแบบบางอย่าง คุณตั้งค่าขนาดตัวอักษรเป็น 30 พิกเซล ใช้ flex layout และตั้งค่า align-items: center;

ต่อมา คุณใช้โครงสร้างเชิงแนวนอนเพื่อให้ข้อความตั้งตรงกลางตามช่องแบ่งขอบเขต ::before และ ::after เพื่อเพิ่มสรรพสมบัติด้านข้างของช่องแบ่งขอบเขต flex: 1 เพื่อให้มันเต็มที่ .divider ช่องว่างทั้งหมดในองค์ประกอบ ยกเว้นข้อความ (text) ที่มีอยู่ content: '' เพื่อให้สองโครงสร้างเชิงแนวนอนนี้เป็นช่องว่าง ไม่มีเนื้อหาใดๆ ภายในนั้น。

เพื่อนั้น ตั้งค่าเนื้อหาด้านใน สีพื้นหลังและเนื้อหาด้านนอกเพื่อเรียกใช้รูปแบบของช่องแบ่งขอบเขต。ในตัวอย่างนี้ สีของช่องแบ่งขอบเขตคือสีแดง และมีเนื้อหาด้านในและด้านนอกบางส่วน。