បន្ទាត់បែងចែក
បន្ទាត់ស្ដើងមួយ សម្រាប់ពេលចន្លោះទំនេរតែម្នាក់ឯងមិនបង្ហាញថាប្លុកពីរនេះដាច់ពីគ្នា។
មើលជាមុនផ្ទាល់
ប្រភព
<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); }
របៀបប្រើ
- បើចន្លោះបែងចែករួចហើយ មិនបាច់គូសបន្ទាត់ — បន្ទាត់គឺជាជំនួយពេលចន្លោះមិនគ្រប់
- ទុកចន្លោះលើក្រោមស្មើគ្នា; បើខុសគ្នា បន្ទាត់មើលទៅដូចជាប់នឹងប្លុកម្ខាង
- ពេលអាចប្រាប់មូលហេតុនៃការបែង — "ឬ" — សូមប្រើបន្ទាត់ដែលមានអក្សរ
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- បន្ទាត់សម្រាប់តុបតែងត្រូវប្រើ border មិនមែន hr ហើយបន្ទាត់បញ្ឈរតុបតែងដាក់ aria-hidden
- ទុកពណ៌បន្ទាត់នៅ --dc-line; បើដិតជាងនេះ បន្ទាត់នឹងលេចជាងមាតិកា