39 CSS Breadcrumbs34 / 39

Pure CSSMIT licensed

Inline Bullet-Point Dot Separator CSS Breadcrumb

The classic blog / editorial trail: text links separated by subtle centred bullet dots generated with ::after{content:'•'}. Understated, inline, and instantly familiar — with a refined hover and an accent current page. The go-to for article headers, category lists, and post meta rows.

Published Updated

Live Demo
Try it

The code

<nav class="bc-34" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Frontend</a></li>
    <li><a href="#" aria-current="page">Modern CSS in 2027</a></li>
  </ol>
</nav>
.bc-34 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: Georgia,'Times New Roman',serif;
  padding: 32px;
  background: oklch(0.99 0.003 60);
  place-items: center;
}

.bc-34 * {
  box-sizing: border-box;
}

.bc-34 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-34 li {
  display: flex;
  align-items: center;
}

.bc-34 li:not(:last-child)::after {
  content: "•";
  margin: 0 12px;
  font-size: 11px;
  color: oklch(0.75 0.02 60);
}

.bc-34 a {
  font: 400 14.5px/1 Georgia,serif;
  color: oklch(0.45 0.05 40);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-34 a:hover {
  color: oklch(0.36 0.11 35);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bc-34 a:focus-visible {
  outline: 2px solid oklch(0.45 0.12 35);
  outline-offset: 3px;
}

.bc-34 li[aria-current="page"] a {
  color: oklch(0.25 0.02 40);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .bc-34 a {
    transition: none;
  }
}
/* No JavaScript — decorative bullet separators via li::after{content:"•"}, kept out of the accessible name; swap the glyph for ·, |, or / in one line. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Inline Bullet-Point Dot Separator CSS Breadcrumb
Source: https://codefronts.com/navigation/css-breadcrumbs/dotted-separator/

The classic blog / editorial trail: text links separated by subtle centred bullet dots generated with ::after{content:'•'}. Understated, inline, and instantly familiar — with a refined hover and an accent current page. The go-to for article headers, category lists, and post meta rows.
## HTML
```html
<nav class="bc-34" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Frontend</a></li>
    <li><a href="#" aria-current="page">Modern CSS in 2027</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-34 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  font-family: Georgia,'Times New Roman',serif;
  padding: 32px;
  background: oklch(0.99 0.003 60);
  place-items: center;
}

.bc-34 * {
  box-sizing: border-box;
}

.bc-34 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-34 li {
  display: flex;
  align-items: center;
}

.bc-34 li:not(:last-child)::after {
  content: "•";
  margin: 0 12px;
  font-size: 11px;
  color: oklch(0.75 0.02 60);
}

.bc-34 a {
  font: 400 14.5px/1 Georgia,serif;
  color: oklch(0.45 0.05 40);
  text-decoration: none;
  padding: 2px 1px;
  transition: color .15s ease;
}

.bc-34 a:hover {
  color: oklch(0.36 0.11 35);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bc-34 a:focus-visible {
  outline: 2px solid oklch(0.45 0.12 35);
  outline-offset: 3px;
}

.bc-34 li[aria-current="page"] a {
  color: oklch(0.25 0.02 40);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .bc-34 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — decorative bullet separators via li::after{content:"•"}, kept out of the accessible name; swap the glyph for ·, |, or / in one line. */
```

How this works

Separators are the simplest possible: li:not(:last-child)::after{content:"•"} places a mid-dot between crumbs, vertically centred by the flex row and spaced with symmetric margins. Because it's a pseudo-element it never enters the accessible name — screen readers read the links only. The dot's colour is a muted neutral so it separates without drawing attention, and its size is tuned (a slightly reduced font-size) so it reads as a delicate divider, not a heavy bullet.

Everything else is clean inline type: a readable link colour, an underline-on-hover with a comfortable underline-offset, and the current page at full ink weight. This is the pattern you've seen on a thousand blogs because it works: minimal, unambiguous, and trivially themeable. The demo also shows the meta-row variant vocabulary — swap the dot for a middot · or a bar | in one line to match post-meta conventions.

Make it yours

  • Divider glyph in one line: • bullet, · middot, | pipe, / slash — match your editorial style.
  • Dot colour + size are two values — keep the dot lighter than the text so it recedes.
  • Tighten to a meta row (13px, 8px margins) for post bylines; open it up for a page header trail.
  • Add the site section in bold as the first crumb for a magazine masthead feel.

Gotchas — read before shipping

  • Keep the dot out of the link text — li::after not inside the <a>, so it's decorative and not clickable.
  • The bullet's default size can look heavy — reduce its font-size and/or opacity so it reads as a separator.
  • Don't rely on the dot alone for structure on screen readers — the <ol> semantics carry the sequence; the dot is purely visual.
  • Vertical centring depends on the flex row — a bullet in normal inline flow can sit low; align via the flex item.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome all.

Pseudo-element content separators are universally supported. Zero modern dependencies — the most portable pattern in the collection.

Techniques used in this demo

place-items / place-contentMDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →