Đường phân cách
Một vạch mảnh, dùng khi chỉ khoảng trắng thôi chưa đủ cho thấy hai khối là tách biệt.
Xem trước trực tiếp
Nguồn
<div class="dc-divide">
<p class="dc-divide__text">지원 서류는 회사가 확인한 뒤 연락합니다.</p>
<hr class="dc-divide__rule" />
<p class="dc-divide__text">연락이 오지 않으면 7일 뒤에 다시 물어볼 수 있습니다.</p>
</div>.dc-divide { font-family:var(--dc-font); }
.dc-divide__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-divide__rule { height:1px; margin:var(--dc-5) 0; border:0; background:var(--dc-line); }
.dc-divide__labeled { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-5) 0; }
.dc-divide__labeled::before, .dc-divide__labeled::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-divide__label { font-size:12px; font-weight:600; color:var(--dc-text-mute); }
.dc-divide__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-2); margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-divide__mitem { white-space:nowrap; }
.dc-divide__vr { flex:0 0 auto; width:1px; height:1em; background:var(--dc-line-bold); }
Cách dùng
- Nếu khoảng trắng đã tách được thì đừng kẻ vạch — vạch chỉ bù khi khoảng trắng không đủ
- Chừa khoảng cách trên và dưới bằng nhau; lệch một bên sẽ trông như vạch thuộc về khối kia
- Khi nói được lý do tách — "hoặc" — hãy dùng đường phân cách có chữ
Điểm cần lưu ý
- Vạch chỉ để trang trí thì dùng border chứ không dùng hr, và gắn aria-hidden cho vạch dọc trang trí
- Giữ màu vạch ở --dc-line; đậm hơn thì vạch lại nổi hơn cả nội dung