CSS Showcase · Live Demo
Dividers that fade.
Separators ranging from a plain hr hairline to gradient-faded labelled rules, vertical column dividers, and inset list separators.
Featured demo
mobile · insetNotifications
Privacy
Appearance
Account
mobile design patterns
divider-inset.css
/* Inset list dividers */
.divider-inset-list .row {
border-bottom: 1px solid var(--border);
}
.divider-inset-list .row:last-child {
border-bottom: 0;
}
.divider-inset-list .row .content {
margin-inline-start: 2rem; /* inset past the leading icon */
}CSS features used
- • ::before / ::after pseudo-lines
- • linear-gradient fades
- • flexbox align-self: stretch
- • border-bottom lists
- • margin-inline-start inset
- • Semantic tokens