nav.breadcrumb ol { padding-left: 0; } nav.breadcrumb li { /* Prefer inline-block to inline, to prevent wrapping inside * individual crumbs. */ display: inline-block; } /* Prefer * li:not(:last-child)::after * to * li + li::before * as I want crumbs and slashes to wrap like this: * foo / bar / * baz * rather than like that: * foo / bar * / baz */ nav.breadcrumb li:not(:last-child)::after { margin-left: 0.25em; height: 0.8em; font-weight: bold; content: '/'; } nav.breadcrumb li[aria-current="page"] { font-weight: bold; }